<body>
<style type="text/css">
* { margin:0; padding:0; font-size:12px; }
.scrollBox{
width:400px;
line-height:20px;
overflow:hidden;
margin:10px;
}
#scrollBox1
{
height:20px;
}
#scrollBox2
{
height:40px;
}
</style>
<p> </p>
<p>每屏一行：</p>
<div id="scrollBox1" class="scrollBox">
<ul>
<li><a href="http://www.baidu.com" target="_blank">11111111111111</a></li>
<li><a href="http://www.baidu.com" target="_blank">22222222222222</a></li>
<li><a href="http://www.baidu.com" target="_blank">33333333333333</a></li>
</ul>
</div>
<p>每屏两行：</p>
<div id="scrollBox2" class="scrollBox">
<ul>
<li><a href="http://www.baidu.com" target="_blank">11111111111111</a></li>
<li><a href="http://www.baidu.com" target="_blank">22222222222222</a></li>
<li><a href="http://www.baidu.com" target="_blank">33333333333333</a></li>
<li><a href="http://www.baidu.com" target="_blank">44444444444444</a></li>
<li><a href="http://www.baidu.com" target="_blank">55555555555555</a></li>
</ul>
</div>
<script type="text/javascript">
function scrollBox(id) {
var self = this;
this.scrollBox = document.getElementById(id);
this.scrollHeight = this.scrollBox.scrollHeight;
this.clientHeight = this.scrollBox.clientHeight;
this.scrollBox.innerHTML+=this.scrollBox.innerHTML;
this.addScroll = function () {
if(this.scrollBox.scrollTop%this.clientHeight==0){
setTimeout(m,2000)
}else {
setTimeout(m,40)
}
function m() {
console.log(self.scrollBox.scrollTop);
console.log(self.scrollBox.scrollHeight);
if(self.scrollBox.scrollTop==self.scrollHeight){
self.scrollBox.scrollTop=0;
}
self.scrollBox.scrollTop++;
self.addScroll()
}
};
this.init = this.addScroll;
}
new scrollBox("scrollBox1").init();
new scrollBox("scrollBox2").init();
</script>
</body>
1060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
