滚轮事件与函数节流
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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
