简洁滚动效果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>

 效果如下

posted @ 2013-07-11 13:11  小镇男子  阅读(158)  评论(0)    收藏  举报