简洁滚动效果jquery
<html>
<head>
<style>
#demo {
margin:10 auto;
width: 300px;
height: 150px;
border: 1px #CCC solid;
background: #FFCD2D;
border-radius: 6px;
overflow: hidden;
}/*必须设定 #demo高度 */
ul {
margin: 0;
padding: 0;
list-style: none;
line-height:25px;
}
ul li a{text-decoration:none;}
ul li a:link{color:#000;}
ul li a:hover{color:#f00;}
#demo ul {
padding: 10px;
text-align:left;
}
#demo ul li{
text-align:left;
}
</style>
</head>
<body>
<center>
<div id="demo">
<ul id="demo1">
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
</ul>
<ul id="demo2">
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
<li><a href="#" target="_blank">新手上路，小镇男子的博客，欢迎指点！</a></li>
</ul>
</div>
<script type="text/javascript">// <![CDATA[
var speed=50;
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
// ]]></script>
</center>
</body></html>
效果如下
