javascript实现滚动栏效果的方法 javascript实现滚动栏效果的方法
        这篇文章主要介绍了javascript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了javascript实现滚动栏效果的方法。分享给大家供大家参考。具体如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
* {
margin: 0;
padding: 0;
}
#div1 ul{
position: absolute;
left: 0px;
top: 0px;
}
#div1 ul li img {
width: 187px;
height: 125px;
}
#div1 ul li{
float: left;
width: 187px;
height: 125px;
list-style: none;
}
#div1{
width: 748px;
height: 125px;
position: relative;
background-color: chartreuse;
overflow: hidden;
float: left;
}
#body{
width: 948px;
height: 125px;
margin: 100px auto;
}
#body #leftdiv{
float: left;
width: 100px;
height: 100px;
}
#body #rightdiv{
float: left;
width: 100px;
height: 100px;
}
#body #leftdiv button{
background-image: url(image/left.png);
width: 100px;
height: 100px;
}
#body #leftdiv button img{
width: 100px;
height: 100px;
}
#body #rightdiv button img{
width: 100px;
height: 100px;
}
window.onload=function(){
var odiv=document.getelementbyid('div1');
var oul=odiv.getelementsbytagname('ul')[0];
var oli=oul.getelementsbytagname('li');
var oleft=document.getelementbyid('leftdiv');
var oright=document.getelementbyid('rightdiv');
oul.innerhtml+=oul.innerhtml;
oul.style.width=oli[0].offsetwidth*oli.length+'px';
var speed=-2;
function move(){
if (oul.offsetleft
oul.style.left='0';
}else if(oul.offsetleft>0){
oul.style.left=-oul.offsetwidth/2+'px';
}
oul.style.left=oul.offsetleft+speed+'px';
};
var timer=setinterval(move,30);
oleft.onclick=function(){
speed=-2;
};
oright.onclick= function () {
speed=2;
};
oul.onmouseover=function(){
clearinterval(timer);
};
oul.onmouseout=function(){
timer=setinterval(move,30);
};
}
希望本文所述对大家的javascript程序设计有所帮助。
http://www.bkjia.com/phpjc/990995.htmlwww.bkjia.comtruehttp://www.bkjia.com/phpjc/990995.htmltecharticlejavascript实现滚动栏效果的方法 javascript实现滚动栏效果的方法 这篇文章主要介绍了javascript实现滚动栏效果的方法,涉及javascript操作html元素...