js公告上滚代码，非常简单_H5之家 - 中国HTML5教程资源分享第一站

js公告上滚代码，非常简单

//下面是js文件，用到了jquery，html代码如下，你可以copy下来就可以用了。

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 

xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公告上滚动代码

</title>
<script type="text/javascript" src="http://www.jqueryajax.com/jquery-1.3.2.min.js"></script>
<script type='text/javascript'>
//滚动公

告
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo

(this);
});
}
var s = true;
var t=0;
function startli()
{
if(s) t = setInterval('AutoScroll(".scrollDiv")',2000);
}

//suggest
$(document).ready(function(){
//滚动公告
startli();
$(".scrollDiv").hover(function(){
clearInterval(t);
var s = false;
},function(){
s 

= true;
startli();
});
})
</script>

<style type="text/css">
.scrollDiv{border:1px #ccc solid; width:150px; height:25px; overflow:hidden}

.scrollDiv ul{height:25px; line-height:25px; margin:0; padding:0;}
.scrollDiv li{line-height:25px; padding-left:5px; height:25px; overflow:hidden}

</style>
</head>

<body>
<div class="scrollDiv">
<ul>
<li><a href="htp://www.jqueryajax.com">滚动公告一

</a></li>
<li><a href="htp://www.jqueryajax.com">滚动公告二</a></li>
<li><a href="htp://www.jqueryajax.com">滚动公告三

</a></li>
<li><a href="htp://www.jqueryajax.com">滚动公告四</a></li>
<li><a href="htp://www.jqueryajax.com">滚动公告五

</a></li>
<li><a href="htp://www.jqueryajax.com">滚动公告六

</a></li>
</ul>
</div>

</body>
</html>