建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

JS实现像marquee属性:无缝向上滚动

时间:2009-04-13 22:49来源: 作者: 点击:
今天在就是想要做一个向上滚动的效果,而使用marquee所实现的滚动效果看起来总是那么不顺心;在前面曾经发过一篇用JS实现向左无逢滚动的文章介绍:用JS实现无缝向左滚动,何不再利用JS来实现向上的无逢滚动呢?!于是通过一番搜索,

相信有很多朋友和我一样,有时候需要制作一些滚动的效果。
今天在就是想要做一个向上滚动的效果,而使用marquee所实现的滚动效果看起来总是那么不顺心;
在前面曾经发过一篇用JS实现向左无逢滚动的文章介绍:用JS实现无缝向左滚动,何不再利用JS来实现向上的无逢滚动呢?!于是通过一番搜索,找到了一个用Javascript时间的无逢向上翻滚效果的代码

<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>

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片