1 <html>
2 <head>
3 <title>1</title>
4 <style type='text/css'>
5 ul{
6 list-style-type:none;
7 margin:0px;
8
9 }
10 ul li{
11 float:left;
12 border:solid 1px green;
13 height:20px;
14 width:25px;
15 border-left-width:0px;
16 }
17 .scroll_li{
18 width:300px;
19 position:relative;
20 height:20px;
21 }
22 .first_li{
23 border-left-width:1px;
24 }
25 #scroll{
26 height:18px;
27 background-color:green;
28 width:100px;
29 position:absolute;
30 left:0px;
31 top:0px;
32 overflow:hidden;
33 }
34 </style>
35 </head>
36 <body>
37 <ul>
38 <li class='first_li' onmousedown="settimeout('left');" onmouseup="cleartimeout();"; onmouseover="this.style.backgroundColor='green';" onmouseout="this.style.backgroundColor='white';"></li>
39 <li class='scroll_li'>
40 <div id='scroll' onmousedown="fun();" onmouseup="fun2();" onmouseout="fun2();">
41 </div>
42 </li>
43 <li onmousedown="settimeout('right');" onmouseup="cleartimeout();"; onmouseover="this.style.backgroundColor='green';" onmouseout="this.style.backgroundColor='white';"></li>
44 </ul>
45 <script language='javascript'>
46 var x;
47 var obj=document.getElementById('scroll');
48 function fun(){
49 x=event.offsetX;
50 obj.onmousemove=fun3;
51 }
52 function fun3(){
53 if(obj.offsetLeft>=0 && obj.offsetLeft<=199){
54 var movex=event.offsetX-x;
55 var temp=obj.offsetLeft+movex;
56 if(temp<0)
57 temp=0;
58 else if(temp>199)
59 temp=199;
60 //x=event.offsetX;
61 obj.style.left=temp+'px';
62 }
63 }
64 function fun2(){
65 obj.onmousemove=null;//←→
66 }
67 function fun4(str){
68 if(str=='right'){
69 var temp=obj.offsetLeft+20;
70 if(temp<199){
71 obj.style.left=(temp)+'px';
72 }else{
73 obj.style.left='199px';
74 }
75
76 }else if(str=='left'){
77 var temp=obj.offsetLeft-20;
78 if(temp>0){
79 obj.style.left=(temp)+'px';
80 }else{
81 obj.style.left='0px';
82 }
83
84 }
85 //6-36.html
86 }
87 var out;
88 //var i=1;
89 function settimeout(str){
90 if(!out){
91 if(str=='left'){
92 out=window.setInterval("fun4('left');",80);
93 }else if(str=='right'){
94 out=window.setInterval("fun4('right');",80);
95 }
96 //document.title=++i;
97 }
98 }
99 function cleartimeout(){
100 if(out){
101 window.clearTimeout(out);
102 out=null;
103 }
104 }
105 </script>
106 </body>
107 </html>
