 |
热门文章 |
|
|
|
|
| 简单实用的向上滚动公告效果 |
| 来源：中国站长天空 更新时间：2009/6/15 15:54:08 阅读次数： 我要投稿 |
|
<!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>
<title>简单实用的向上滚动公告效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<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>
<script type="text/javascript" src="http://www.zzsky.cn/effect/images/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>
</head>
<body>
运行代码查看演示的时候需要先刷新一下才能看到效果，当然，在实际应用中不会出现这个问题。<br><br>
<!--把下面代码加到<body>与</body>之间-->
<div class="scrollDiv">
<ul>
<li><a href="http://www.zzsky.cn" target="_blank">滚动公告一</a></li>
<li><a href="http://www.zzsky.cn" target="_blank">滚动公告二</a></li>
<li><a href="http://www.zzsky.cn" target="_blank">滚动公告三</a></li>
<li><a href="http://www.zzsky.cn" target="_blank">滚动公告四</a></li>
<li><a href="http://www.zzsky.cn" target="_blank">滚动公告五</a></li>
<li><a href="http://www.zzsky.cn" target="_blank">滚动公告六</a></li>
</ul>
</div>
</body>
</html> |
|
| 上一篇文章： 单行两列文本向上滚动特效下一篇文章： 漂亮的title提示信息 |
|
|
|
注册 登录
