本文介绍了一种可在IE和Firefox浏览器上正常运行的文本滚动特效实现方案。该方案通过JavaScript控制div元素滚动，同时提供了鼠标悬停停止滚动的功能。代码中包括了完整的HTML结构及样式设置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>符合标准的间隙滚动代码(兼容IE和FireFox) - 网页特效观止-网页特效代码|JsCode.CN|</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body { padding: 30px; font-size: 12px;}
a { color: #000; text-decoration: none; }
a:hover { color: #F60; }
#scrollWrap {
width:300px;
height: 18px;
overflow: hidden;
background: #E6F6F6;
}
#scrollMsg {
float: left;
text-align: left;
padding:0 10px;
}
#scrollMsg ul {
margin:0;
padding:0;
}
#scrollMsg li {
line-height: 18px;
list-style:none;
}
-->
</style>
</head>
<body>
<div id="scrollWrap">
<div id="scrollMsg">
<ul>
<li><a href="#">1111111111111</a></li>
<li><a href="#">22222222222</a></li>
<li><a href="#">333333333333333</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
<!--
try{
var isStoped = false;
var oScroll = document.getElementById("scrollWrap");
with(oScroll){
noWrap = true;
}
oScroll.onmouseover = new Function('isStoped = true');
oScroll.onmouseout = new Function('isStoped = false');
var preTop = 0;
var curTop = 0;
var stopTime = 0;
var oScrollMsg = document.getElementById("scrollMsg");
oScroll.appendChild(oScrollMsg.cloneNode(true));
init_srolltext();
}catch(e) {}
function init_srolltext(){
oScroll.scrollTop = 0;
setInterval('scrollUp()', 15);
}
function scrollUp(){
if(isStoped) return;
curTop += 1;
if(curTop == 19) {
stopTime += 1;
curTop -= 1;
if(stopTime == 180) {
curTop = 0;
stopTime = 0;
}
}else{
preTop = oScroll.scrollTop;
oScroll.scrollTop += 1;
if(preTop == oScroll.scrollTop){
oScroll.scrollTop = 0;
oScroll.scrollTop += 1;
}
}
}
//-->
</script>
<p> </p>
<p> </p>
<p> </p>
<p>更多网页特效代码尽在 <a href="http://www.corange.cn/">corange.cn</a></p>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
