<!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 runat="server">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
ul, li
{
margin: 0;
padding: 0;
}
#scrollDiv
{
width: 300px;
height: 25px;
line-height: 25px;
border: #ccc 1px solid;
overflow: hidden;
}
#scrollDiv li
{
height: 25px;
padding-left: 10px;
}
</style>
<script src="./jquery-1.6.1.min.js" type="text/javascript"></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);
});
}
$(document).ready(function() {
var myar = setInterval('AutoScroll("#scrollDiv")', 1000)
$("#scrollDiv").hover(function() { clearInterval(myar); }, function() { myar = setInterval('AutoScroll("#scrollDiv")', 1000) }); //当鼠标放上去的时候,滚动停止,鼠标离开的时候滚动开始
});
</script>
</head>
<body>
<div id="scrollDiv">
<ul>
<li><a href="http://www.sina.com">欢迎浏览新浪网</a></li>
<li><a href="http://www.163.com">欢迎浏览网易</a></li>
<li><a href="http://www.csdn.com">欢迎进入程序员之家</a></li>
<li><a href="http://www.51aspx.com">很好的源代码下载区</a></li>
<li><a href="http://www.msdn.com">msdn</a></li>
<li><a href="http://www.baidu.com">欢迎浏览百度网</a></li>
</ul>
</div>
</body>
</html>