从下至上无缝滚动代码

最新推荐文章于 2022-08-23 17:19:00 发布

原创最新推荐文章于 2022-08-23 17:19:00 发布 · 945 阅读

0 ·

CC 4.0 BY-SA版权

php 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页元素垂直滚动效果的方法。通过不断更新页面中某个区域的位置来达到滚动的效果，并且可以通过调整参数来自定义滚动的速度。文章还提供了完整的代码示例，包括HTML结构和JavaScript逻辑。

<div align="center" id="demo" style="overflow:hidden;height:300px;width:514px;">
<div id="demo1">
<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0" class="style_04" style="border-bottom:#666666 1px dotted; height:26px;">
<tr>
<td align="left">
<table width="514" >
<tr>
<td width="260"><a href=""></a> </td>
<td align="right">
<span style="font-size:11px;">
<a href="#">内容</a>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="demo2"></div>
</div>
123123213
<script language="javascript">
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=30; //滚动速度值，值越大速度越慢，计时器的时间变量
var nnn=200/demo1.offsetHeight;//nnn等于200除demo1的高度
for(i=0;i<nnn;i++){demo1.innerHTML+="<br />"+ demo1.innerHTML+i}//循环生成元素
demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar = setInterval(Marquee,speed); //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器
</script>