向上循环滚动带停留的js特效_JavaScript技术_编程技术-你的首页-uuhomepage.com
循环滚动在网页里有普遍的应用,这里介绍的方法简单、漂亮,而且容易扩展。下面一起来说一下如何实现:
将一下代码复制,另存为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文件引用过来(同级目录):