您的位置：首页 > Web前端 > JQuery

简洁滚动效果jquery

2013-07-11 13:11 155 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航