相信有很多朋友和我一样,有时候需要制作一些滚动的效果。
今天在就是想要做一个向上滚动的效果,而使用marquee所实现的滚动效果看起来总是那么不顺心;
在前面曾经发过一篇用JS实现向左无逢滚动的文章介绍:用JS实现无缝向左滚动,何不再利用JS来实现向上的无逢滚动呢?!于是通过一番搜索,找到了一个用时间的无逢向上翻滚效果的代码
<div id="demo" style="overflow:hidden;height:168px;width:300px;">
<div id="demo1">
<!--此处放要显示的内容-->
</div>
<div id="demo2"></div>
</div>
<script language="javascript">
var speed=30;
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0){
demo.scrollTop-=demo1.offsetHeight;
}
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)};
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>