走马灯，精简，高效代码，值得一看

最新推荐文章于 2023-11-28 14:01:05 发布

ayqxm

最新推荐文章于 2023-11-28 14:01:05 发布

阅读量729

点赞数

文章标签： xhtml div class css 浏览器公告

本文链接：https://blog.csdn.net/ayqxm/article/details/6759877

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>单行滚动特效代码-适合做公告新闻</title>
<style>
a{display:block;line-height:18px;text-decoration:none;color:#555;font-family:Arial;font-size:12px;}
.shell{
background:url(http://www.csrcode.cn/html/txdm_2/images/arrowb.gif) no-repeat 4px 5px;
border:1px solid #aaa;
width:230px;
padding:3px 2px 2px 26px;
}
#div1{
height:18px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="shell">
<div id="div1">
<a href="#">白日依山尽 - 李白</a>
<a href="#">黄河入海流 - 李白</a>
<a href="#">尘埃不见咸阳桥 - 杜甫</a>
<a href="#">牧童骑黄牛 - 不知道</a>
<a href="#">窗含西岭千秋雪</a>
</div>
<div>
</body>
<script>
var c,_=Function;
with(o=document.getElementById("div1")){ innerHTML+=innerHTML; οnmοuseοver=_("c=1"); οnmοuseοut=_("c=0");}
(F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))();
</script>
</html>

代码修改方法如下：
外围容器的名称：with(o=document.getElementById("div1")) 这个div1就是外围容器的ID~是ID不是class~
行高滚动高度：(F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);" 这里里面有2个18.都是行高~可以根据自己的容器的高度来修改~
滚动速度和停滞速度：setTimeout(F,#%18?10:1500);".replace 这里可以更改速度的相关参数~

这段代码的兼容IE和火狐，其他的浏览器未测试，不过这段代码简单易懂以维护，还是比较推荐的！