代码一:
<div id=design style="OVERFLOW: hidden; WIDTH: 248px; HEIGHT: 237px;">
<div id=design1 style="OVERFLOW: hidden">
滚动内容
</div>
<div id=design2>
</div>
</div>
<script>
var speed=30
design2.innerHTML=design1.innerHTML
function Marquee2()
{
if(design2.offsetTop-design.scrollTop<=0)
design.scrollTop-=design1.offsetHeight
else
{
design.scrollTop++
}
}
var MyMar2=setInterval(Marquee2,speed)
design.onmouseover=function()
{
clearInterval(MyMar2)
}
design.onmouseout=function()
{
MyMar2=setInterval(Marquee2,speed)
}
</script>
代码二:
<div id="marquees">
<!--
滚动内容
-->
</div>
<script language="JavaScript">
marqueesHeight=160;
stopscroll=false;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;
function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
setInterval("scrollUp()",30);
}
document.body.onload=init;
function scrollUp(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop+=1;
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
marquees.scrollTop+=1;
}
}
</script>
分享到:
相关推荐
js实现的滚动公示栏效果,用于公告栏等的现实
运用JQUery原生方法实现文字上下循环滚动效果,我这里的是文字,你也可以换成图片。
首页通知栏上下滚动效果
网页循环滚动代码 包括上下 左右 循环滚动
网站中公告上下无缝滚动,marquee,要求每条广告的内容高度一致,如果想改成高度不一致的无缝滚动,联系我,我再发给你,懒得一批。
上下滚动公告效果.rar
ios上下无限循环滚动实现demo
参考链接 : https://blog.csdn.net/dengshunhao/article/details/82657585(包含效果图) UGUI实现闹钟选择,数字上下循环滚动(当然也可以换成其他UI,比如图片)
公告信息上下轮播
音视频资料-图片上下循环滚动的公告导航.rar
c# listview 实现循环滚动显示
主要为大家详细介绍了JavaScript实现公告栏上下滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
自上而下的循环滚动试图
asp.net 的GridView的标题不动内容上下循环滚动
自定义视图上下无限循环滚动
实现listview自动循环滚动
自定义的ViewGroup实现的无缝连接可循环滚动布局,使用较为简单,虽然命名有点随便
可以在一同页使用多个移动块,由于使用类设计,有效地避免变量命名的冲突问题。
本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <p class=text key=text.id>{{text.val}} [removed...
jQuery单行文字上下不间断循环滚动效果,适合做新闻滚动推荐