当前位置: 首页 » 笔记 » JS逐条向上滚动代码正文

JS逐条向上滚动代码

  • 零分
  • 2,862

JS逐条向上滚动代码,这种效果,或许现在都很少用到了。原理是复制层向上滚动。

CSS:

.box{font-size:14px;text-align:left;overflow:hidden;height:30px;line-height:30px;width:200px;border:1px solid #e4e4e4;}
.box ul{margin:0px;overflow:hidden;width:300px;}
.box li{ list-style-type:none; }
.box a{height:30px;width:350px;line-height:30px;overflow:hidden;}

HTML:

<div class="box" id="marqueebox">
<ul>
<li><a href="//www.32xp.com" target="_blank">第一条</a></li>
<li><a href="//www.32xp.com" target="_blank">第二条</a></li>
<li><a href="//www.32xp.com" target="_blank">第三条</a></li>
<li><a href="//www.32xp.com" target="_blank">第四条</a></li>
</ul>
</div>

JS:

<script type="text/javascript">
function startmarquee(lh,speed,delay,index){
var t;
var p=false;
var o=document.getElementById("marqueebox");
o.innerHTML+=o.innerHTML;
o.onmouseover=function(){p=true}
o.onmouseout=function(){p=false}
o.scrollTop = 0;
function start(){
t=setInterval(scrolling,speed);
if(!p){ o.scrollTop += 1;}
}
function scrolling(){
if(o.scrollTop%lh!=0){
o.scrollTop += 1;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(30,30,3000,0);
</script>

声明:博客中如无特殊说明或标注的文章均为博客原创文章,部分文章来源互联网,如有侵犯您的版权,或者对零分博客发布的文章有异议,请来信告知删除、修改,如您有好的建议或者意见也可以来信,谢谢!

请TA喝杯水^_^ 如本文“对您有用”,欢迎随意打赏,让我们坚持创作! 请TA喝水