1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin:0;
9 padding:0;
10 }
11 html,body{
12 width:100%;
13 height:100%;
14 position: relative;
15 overflow: hidden;
16 }
17 #page{
18 position:absolute;
19 width:100%;
20 height:100%;
21 top:0;
22 left:0;
23 }
24 #page li{
25 width:100%;
26 height:100%;
27 }
28 #page li:first-child{
29 background: red;
30 }
31 #page li:nth-child(2){
32 background: blue;
33 }
34 #page li:nth-child(3){
35 background: orange;
36 }
37 #page li:last-child{
38 background: pink;
39 }
40 #round{
41 position: fixed;
42 top:30%;
43 right:100px;
44 }
45 #round li{
46 list-style: none;
47 margin:20px;
48 width:20px;
49 height:20px;
50 border-radius: 50%;
51 background: yellow;
52 border:5px solid #fff;
53 }
54 </style>
55 <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
56 </head>
57 <body>
58 <ul index="0" id="page">
59 <li>111</li>
60 <li>222</li>
61 <li>333</li>
62 <li>444</li>
63 </ul>
64 <ul id="round">
65 <li></li>
66 <li></li>
67 <li></li>
68 <li></li>
69 </ul>
70 </body>
71 <script>
72 $(‘#page‘).bind(‘mousewheel DOMMouseScroll‘,function(e){
73 var whd = e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : e.originalEvent.detail;
74 var dir = whd > 0 ? 1 : 0;
75 var index = $(‘#page‘).attr(‘index‘);
76 var len = $(‘#page li‘).length - 1;
77 if(dir){
78 if(--index < 0){
79 return;
80 }
81 }
82 else{
83 if(++index > len){
84 return;
85 }
86 }
87 if(!$(this).is(‘:animated‘)){
88 $(this).animate({‘top‘:‘-‘ + index + ‘00%‘},500);
89 $(this).attr(‘index‘,index);
90 }
91 })
92 $(‘#round li‘).each(function(){
93 $(this).click(function(){
94 $(‘#page‘).attr(‘index‘,$(this).index());
95 var index = $(‘#page‘).attr(‘index‘);
96 if(!$(‘#page‘).is(‘:animated‘)){
97 $(‘#page‘).animate({‘top‘:‘-‘ + index + ‘00%‘},500);
98 $(‘#page‘).attr(‘index‘,index);
99 }
100 })
101 })
102 </script>
103 </html>
不是很确定是不是对的，但是功能上好像已经实现了。原生的已经忘完了，也或许本来就不会，哈哈。
之前自己在网上找代码的时候，总希望全部复制粘贴然后运行就能出效果，可是很少，Now my trun,my rule,hh.
时间： 2024-10-29 19:06:10