文字滚动 ul li

浏览:640 发布日期:2018/07/15 分类:前端开发
<html>
<head>
<title>兼容性很好的LI列表文字js无缝<a href='http://www.daimajiayuan.com/list-97.html' target='_blank'><u>滚动效果</u></a></title>
<style type="text/css">
#demo ul{
margin:0;
padding:0;
list-style:none;
}
#demo li a{
display:block;
}
#demo{
float:left;
width:200px;
height:100px;
display:inline;
overflow:hidden;
}
</style>
</head>
<body>
<div id="demo">
<div id="demo1">
<ul>
<li>1111111111111111111</li>
<li>2222222222222222222</li>
<li>3333333333333333333</li>
<li>4444444444444444444</li>
<li>5555555555555555555</li>
<li>6666666666666666666</li>
<li>7777777777777777777</li>
<li>8888888888888888888</li>
<li>9999999999999999999</li>
<li>1010101010101010101</li>
</ul>
</div>
<div id="demo2"></div>
</div>
<script type="text/javascript">
var speed=40;
var ZJJDemo=document.getElementById('demo');
var ZJJDemo1=document.getElementById('demo1');
var ZJJDemo2=document.getElementById('demo2');
ZJJDemo2.innerHTML=ZJJDemo1.innerHTML
function Marquee1(){
if(ZJJDemo2.offsetHeight-ZJJDemo.scrollTop<=0)
ZJJDemo.scrollTop-=ZJJDemo1.offsetHeight
else{
ZJJDemo.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)
ZJJDemo.onmouseover=function() {clearInterval(MyMar1)}
ZJJDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script>
</body>
</html>

<br>文字无间断滚动-兼容IE7 IE6 FireFox Opera,基于javascript代码编写,很小的特效,但很常用,希望大家喜欢。<br><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>
最佳答案
评论( 相关
后面还有条评论,点击查看>>