实现滚动效果 <style type="text/css"> *{ margin:0px; padding:0px; border:0px; } body{font-size:12px} #demo{ overflow:hidden; height:200px; width:480px; position:relative; border: 1px solid skyblue; } #demo1{ height:auto; text-align:left; } #demo2{ height:auto; text-align:left; } #demo1 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; border: 1px solid blue; } #demo2 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; border: 1px solid blue; } </style> </head> <body> <div id="demo"> <ul id="demo1"> <li>111111111111111111111</li> <li>2222222222222222222222222222</li> <li>3333333333333333333333</li> <li>444444444444444444444</li> <li>55555555555555555555555555</li> <li>6666666666666666666666</li> <li>777777777777777777777777</li> </ul> <div id="demo2"></div> </div> <script src="../jquery-3.7.0.js"></script>
时间: 2024-03-27 16:39:10 浏览: 92
这段代码实现了一个滚动效果,其中一个ul列表(id为demo1)中的内容会滚动显示在一个固定高度的div(id为demo)中。当demo1中的内容滚动完后,demo2中的内容会接着滚动。代码中使用了CSS样式来设置div和ul的属性,以及设置li元素的样式。同时,使用了jQuery库来实现滚动效果。具体实现可以参考下面的代码:
```
$(function(){
var demo1 = $("#demo1");
var demo2 = $("#demo2");
var demo = $("#demo");
var liHeight = demo1.find("li").outerHeight();
var timer = setInterval(roll, 2000);
demo2.html(demo1.html());
function roll(){
if(demo2[0].offsetHeight - demo[0].scrollTop <= 0){
demo[0].scrollTop -= demo1[0].offsetHeight;
}else{
demo[0].scrollTop++;
}
}
demo.hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(roll, 2000);
});
});
```
阅读全文