帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> HTML常用技巧 >> 阅读文章

实现网页文字无缝滚动

来源:远方教程 作者:远方教程 发布时间:2013-10-24 查看次数:3430 访问[新版]

  总所周知,html的marquee标签可以实现网页文字的移动。但是marquee滚动的效果不太和谐,且如果内容多会出现“断续”的情况。因此,无缝滚动很受欢迎。现将代码送上,只须替换链接即可。

<div id=marquees style="height=100px;LEFT: 60px; POSITION: absolute; TOP: 100px;">
<font style="font-family:宋体; color:white; font-size:14px;line-height=15px">
<a href="#"><img src=1.jpg></a><br>
<br>
<a href="#">远方教程——满足您的求知欲!</a><br>
<br>
<a href="#">做网络追求卓越,不懂处点击远方</a><br>
<br>
<a href="#">远方教程——站长建站之家</a><br>
<br>
<a href="#">远方网,爱在远方。</a><br>
<br>
</div>
<script language="JavaScript">

marqueesHeight=100;
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>

打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部