DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> js公告上滾代碼,非常簡單
js公告上滾代碼,非常簡單
編輯:AJAX詳解     

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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved