All articles(网络文学目录) All Pictures(图片目录) All Softwares(软件目录)

 
向上循环滚动带停留的js特效_JavaScript技术_编程技术

Writer: delv Article type: Programming skills(编程技巧) Time: 2013/12/31 6:40:06 Browse times: 329 Comment times: 0

向上循环滚动带停留的js特效_JavaScript技术_编程技术


Head photo

Go homepage
Upload pictures
Write articles

向上循环滚动带停留的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文件引用过来(同级目录):







There are 0 records,
Comment:
Must be registered users to comment(必须是注册用户才能发表评论)

Disclaimer Privacy Policy About us Site Map
Copyright ©2011-
uuhomepage.com, Inc. All rights reserved.