jquery--滚轮事件与函数节流/实例-整屏滚动

滚轮事件与函数节流

jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

函数节流
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

整屏滚动实例

  1 body,ul{
  2     margin:0;
  3     padding:0;
  4 }
  5 
  6 ul{list-style:none;}
  7 
  8 .pages_con{
  9     position:fixed;
 10     left:0;
 11     top:0;
 12     width:100%;
 13     overflow:hidden;
 14 }
 15 
 16 .pages{
 17     height:600px;
 18     position:relative;
 19 }
 20 .page1{    background-color:orange;}
 21 .page2{    background-color:lightgreen;}
 22 .page3{    background-color:cyan;}
 23 .page4{    background-color:pink;}
 24 .page5{    background-color:lightblue;}
 25 
 26 
 27 .points{
 28     width:16px;
 29     height:176px;
 30     position:fixed;
 31     right:20px;
 32     top:50%;
 33     margin-top:-88px;
 34 }
 35 
 36 .points li{
 37     width:13px;
 38     height:13px;
 39     margin:16px 0;
 40     border-radius:50%;
 41     border:1px solid #666;
 42     cursor:pointer;
 43 }
 44 
 45 .points li.active{
 46     background-color:#666;
 47 }
 48 
 49 .main_con{
 50     width:900px;
 51     height:400px;
 52     position:absolute;
 53     left:50%;
 54     top:50%;
 55     margin-left:-450px;
 56     margin-top:-200px;
 57 }
 58 
 59 .main_con .left_img{
 60     width:363px;
 61     height:400px;
 62     float:left;
 63     position:relative;
 64     left:-50px;
 65     opacity:0;
 66     filter:alpha(opacity=0);
 67     transition:all 1000ms ease 300ms;
 68 }
 69 
 70 .main_con .right_info{
 71     width:500px;
 72     height:300px;
 73     margin-top:50px;
 74     float:right;
 75     font-family:'Microsoft Yahei';
 76     font-size:20px;
 77     line-height:50px;
 78     color:#666;
 79     text-indent:2em;
 80     text-align:justify;
 81     position:relative;
 82     right:-50px;
 83     opacity:0;
 84     filter:alpha(opacity=0);
 85     transition:all 1000ms ease 300ms;
 86 }
 87 
 88 
 89 .moving .main_con .left_img{
 90     left:0;
 91     opacity:1;
 92     filter:alpha(opacity=100);
 93 }
 94 
 95 .moving .main_con .right_info{
 96     right:0;
 97     opacity:1;
 98     filter:alpha(opacity=100);
 99 }
100 
101 
102 
103 
104 .main_con .right_img{
105     width:522px;
106     height:400px;
107     float:right;
108     position:relative;
109     top:-50px;
110     opacity:0;
111     filter:alpha(opacity=0);
112     transition:all 1000ms ease 300ms;
113 }
114 
115 .main_con .left_info{
116     width:350px;
117     height:300px;
118     margin-top:50px;
119     float:left;
120     font-family:'Microsoft Yahei';
121     font-size:20px;
122     line-height:50px;
123     color:#666;
124     text-indent:2em;
125     text-align:justify;
126     position:relative;
127     bottom:-50px;
128     opacity:0;
129     filter:alpha(opacity=0);
130     transition:all 1000ms ease 300ms;
131 }
132 
133 
134 .moving .main_con .right_img{
135     top:0;
136     opacity:1;
137     filter:alpha(opacity=100);
138 }
139 
140 .moving .main_con .left_info{
141     bottom:0;
142     opacity:1;
143     filter:alpha(opacity=100);
144 }
145 
146 
147 
148 
149 .main_con .center_img{
150     width:611px;
151     height:337px;
152     position:absolute;
153     left:50%;
154     margin-left:-305px;
155     bottom:-50px;
156     opacity:0;
157     filter:alpha(opacity=0);
158     transition:all 1000ms ease 300ms;
159 
160 }
161 
162 
163 .moving .main_con .center_img
164 {
165     bottom:0;
166     opacity:1;
167     filter:alpha(opacity=100);
168 }
test.css

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>整屏滚动</title>
  6 
  7     <link rel="stylesheet" type="text/css" href="../css/test.css">
  8     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
  9     <script type="text/javascript" src="../js/jquery.mousewheel.js"></script>   <!--引入mousewheel-->
 10     <script type="text/javascript">
 11         $(function(){
 12             var $h=$(window).height();  //获取可视区高度
 13             var $pages=$('.pages');
 14             $pages.css({height:$h});    //设置可视区高度
 15 
 16             var nowscreen=0;
 17             var len=$pages.length;
 18             $points=$('.points li')
 19 
 20             var timer=null;   //定义全局变量
 21 
 22             $pages.eq(0).addClass('moving');   //第一页设置默认效果
 23 
 24             //dat的值：-1是向下滑动，1是向上滑动
 25             $(window).mousewheel(function(event,dat){
 26                 //alert(dat);
 27 
 28                 //----------------巧妙使用定时器来减少触发的次数，实现函数节流----
 29                 //清掉前面刚刚开的定时器
 30                 clearTimeout(timer);
 31 
 32                 // 最新的一次定时器
 33                 timer=setTimeout(function(){
 34                     if(dat==-1){
 35                         nowscreen++;
 36                         if(nowscreen>len-1){
 37                             nowscreen=len-1;
 38                         }
 39                     }
 40                     else{
 41                         nowscreen--;
 42                         if(nowscreen<0){
 43                             nowscreen=0;
 44                         }
 45                     }
 46 
 47                     $('.pages_con').animate({top:-$h*nowscreen},300);    //设置翻页动画
 48                     $points.eq(nowscreen).addClass('active').siblings().removeClass('active');   //设置右侧滚动圆点效果
 49                     $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');   //设置main_con里的动画效果
 50                 },200)
 51                 })
 52 
 53                 $points.click(function(){     //设置点击右侧圆点时的动态效果
 54                     $(this).addClass('active').siblings().removeClass('active');
 55                     $('.pages_con').animate({top:-$h*$(this).index()},300);
 56                     $pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
 57             })
 58         })
 59 
 60     </script>
 61 </head>
 62 <body>
 63     <div class="pages_con">
 64 
 65         <div class="pages page1">
 66             <div class="main_con">
 67                 <div class="left_img"><img src="images/001.png"></div>
 68                 <div class="right_info">
 69                 Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
 70 
 71                 </div>
 72             </div>
 73         </div>
 74 
 75         <div class="pages page2">
 76             <div class="main_con">
 77                 <div class="right_img"><img src="images/002.png"></div>
 78                 <div class="left_info">
 79                 2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
 80                 </div>
 81             </div>
 82 
 83         </div>
 84 
 85         <div class="pages page3">
 86             <div class="main_con">
 87                 <div class="left_img"><img src="images/004.png"></div>
 88                 <div class="right_info">
 89                 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
 90 
 91 
 92                 </div>
 93             </div>
 94         </div>
 95 
 96         <div class="pages page4">
 97             <div class="main_con">
 98                 <div class="left_img"><img src="images/003.png"></div>
 99                 <div class="right_info">
100                     Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
101                 </div>
102             </div>
103         </div>
104 
105         <div class="pages page5">
106             <div class="main_con">
107                 <div class="center_img"><img src="images/005.png"></div>
108             </div>
109 
110         </div>
111     </div>
112     <ul class="points">
113         <li class="active"></li>
114         <li></li>
115         <li></li>
116         <li></li>
117         <li></li>
118     </ul>
119 </body>
120 </html>

posted on 2019-12-26 22:55  cherry_ning  阅读(535)  评论(0)    收藏  举报

导航