1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>全屏滚动代码测试</title>
6 <style type="text/css">
7 body,ul,li{ margin: 0; padding: 0;}
8 #tbody{ overflow: hidden; clear: both; position: relative;}
9 #tbody ul{ top:0px; left: 0px; position: absolute; width: 100%}
10 .box{ width:100%; margin: 0;}
11 .index1{background:rgb(45, 150, 103);}
12 .index2{ background:grey;}
13 .index3{ background: rgb(75, 136, 46);}
14 #nav {position: absolute; top:10px; left: 10px; z-index: 999}
15 #nav span{ background: #222222; color: #fff; width: 20px; height: 20px; border-radius: 20px; display: block;
16 text-align: center;line-height: 20px; float: left; margin-left: 10px; cursor: pointer; }
17 </style>
18 <script src="js/jquery.min.js"></script>
19 <script type="text/javascript" charset="utf-8">
20 var height;
21 var isP=false;
22 var _index=0;
23
24 $(function(){
25 SetSize();
26
27 $(window).resize(function(){
28 SetSize();
29 });
30
31
32 $("#nav span").click(function(){
33 var index=$(this).index();
34 $(this).attr("cur","cur").siblings().removeAttr("cur");
35 start(index);
36 })
37
38
39 var scrollFun=function(e)
40 {
41 if(!isP)
42 {
43 _index=$("#nav span[cur=‘cur‘]").index();
44 }
45 isP=true;
46
47 e=e || window.event;
48 if(e.wheelDelta)
49 {
50 if(e.wheelDelta>0)
51 {
52 _index--;
53 }
54
55 if(e.wheelDelta<0)
56 {
57 _index++;
58 }
59 start(_index);
60 }
61 }
62
63 document.onmousewheel=scrollFun;
64 });
65
66 function start(index)
67 {
68 index=index<0?0:index>2?2:index;
69
70 $("#tbody ul").animate({"top":-(index*height)},1000);
71 }
72
73 function SetSize()
74 {
75 var box=".box";
76 var width=$(window).width();
77 height=$(window).height();
78
79 $(box).css("height",height);
80 $("#tbody").css("height",height);
81
82 }
83 </script>
84 </head>
85 <body>
86 <div id="nav">
87 <span cur="cur">1</span>
88 <span>2</span>
89 <span>3</span>
90 </div>
91 <div id="tbody">
92 <ul>
93 <li class="box index1"></li>
94 <li class="box index2"></li>
95 <li class="box index3"></li>
96 </ul>
97
98 </div>
99 </body>
100 </html>
时间： 2024-10-07 06:08:45