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>