Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)delvpublished in(发表于) 2013/12/31 6:40:06 向上循环滚动带停留的js特效_JavaScript技术_编程技术
循环滚动在网页里有普遍的应用,这里介绍的方法简单、漂亮,而且容易扩展。下面一起来说一下如何实现:
将一下代码复制,另存为scroll.js文件。
marqueesHeight=20;stopscroll=false;with(rove){ style.width=0; style.height=marqueesHeight; style.overflowX="visible"; style.overflowY="hidden"; noWrap=true; onmouseover=new Function("stopscroll=true"); onmouseout=new Function("stopscroll=false"); } preTop=0; currentTop=marqueesHeight; stoptime=0; rove.innerHTML+=rove.innerHTML;
function init_srolltext(){ rove.scrollTop=0; setInterval("scrollUp()",1);}init_srolltext();
function scrollUp(){ if(stopscroll==true) return; currentTop+=1; if(currentTop==marqueesHeight+1) { stoptime+=1; currentTop-=1; if(stoptime==300) { currentTop=0; stoptime=0; } } else { preTop=rove.scrollTop; rove.scrollTop+=1; if(preTop==rove.scrollTop){ rove.scrollTop=marqueesHeight; rove.scrollTop+=1; } }
}init_srolltext();
当然也可以用包含起来直接放到网页中,但要注意的是,由于需要获取页面中的id,所以要放到我们滚动内容的下面。
HTML内容方面,得用一个id为rove的div包含起来,在这里为了保险起见,我们用样式表将可能溢出的部分隐藏掉。
然后将我们保存的js文件引用过来(同级目录):
赞