<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>整页滚动</title> <link rel="stylesheet" type="text/css" href="css/test.css"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> <script type="text/javascript"> $(function(){ // !!!!!增加定时器之后,出效果会比较缓慢, 应该多些耐性, // 耗时:0.5h // . // 在pages_con中从上到下依次排列了五个页面. 在滚动滑轮或者点击导航点的时候切换索引,在完成切换之后增加moveing属性完成动画. var $screen = $('.pages_con') // var $screen = $('pages_con') // !!!!!!!!!! 在输入变量的时候一定确定是否把引入方式填写正确. // !!!!!!!!!! 此处浪费1.5h var $pages = $('.pages'); // var $len = $($pages.length) // 此处不需要$() 引导. var $len = $pages.length; // alert($pages) // alert($len) 弹出5,5 个元素 // 1.此布局中,没有设置高度,需要自己获取窗口高度,然后由此来定位每次页面移动距离. var $h = $(window).height(); // alert($h) $pages.css({'height':$h}); // 刚开始的时候page1就要增加moving动画 $pages.eq(0).addClass('moving'); // -----滑轮事件向下滚动是-1, 用scrollBottom来衡量页数更方便些.----错误! 滚动事件只有-1和1,无所谓正负值方便与否. 更主要应该根据页数布局来衡量计算方式. // 依次从上到下,从上到下浏览,就应该使用scrollTop. var $nowscreen = 0; var timer = null; // 占据变量符. //编辑导航点. var $points = $('.points li'); // alert($points.length) // 默认激活页面1的导航点. $points.eq(0).addClass('active'); // 当发生点击导航点事件时候, 切换页面, 且切换导航点激活状态. $points.click(function(){ $nowscreen = $(this).index(); $(this).addClass('active').siblings().removeClass('active'); $screen.animate({'top':-$h*$nowscreen},300) $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving'); }) $(window).mousewheel(function(event,dat){ // 此处单单添加dat不起作用, 需要增加event事件函数. clearTimeout(timer); // var timer = setTimeout(function(){ // 定时器需要增加var , 但是不能在每个函数内部分别设置变量.相当于有很多个变量 timer = setTimeout(function(){ //判断滚动事件 if (dat==-1||dat<-1) { $nowscreen++; } // else if(dat==1){ else if(dat==1||dat>1){ $nowscreen--; } // 限制上方屏幕 if ($nowscreen<0){ $nowscreen=0; } // 限制下方屏幕 if ($nowscreen>$len-1){ $nowscreen=$len-1; } // document.title=$nowscreen; // $('html body').animate({'top':-$nowscreen*$h}); // $(document).scrollTop(-$nowscreen*$h); // 此处因为pages_con的宽高设置都为原本属性的100%, 所以挪动document和htmlbody都没有用; // 判断滚动事件后, 切换页面, 且 切换导航点激活状态. $screen.animate({'top':-$h*$nowscreen},300) $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving'); $points.eq($nowscreen).addClass('active').siblings().removeClass('active'); },100) }) }) </script> </head> <body> <div class="pages_con"> <div class="pages page1"> <div class="main_con"> <div class="left_img"><img src="images/001.png"></div> <div class="right_info"> Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。 </div> </div> </div> <div class="pages page2"> <div class="main_con"> <div class="right_img"><img src="images/002.png"></div> <div class="left_info"> 2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 </div> </div> </div> <div class="pages page3"> <div class="main_con"> <div class="left_img"><img src="images/004.png"></div> <div class="right_info"> 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。 </div> </div> </div> <div class="pages page4"> <div class="main_con"> <div class="left_img"><img src="images/003.png"></div> <div class="right_info"> Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。 </div> </div> </div> <div class="pages page5"> <div class="main_con"> <div class="center_img"><img src="images/005.png"></div> </div> </div> </div> <ul class="points"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>