- 新建一个index.html页面，写入代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数据轮滑效果</title>
<script type = "text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type = "text/javascript" src="../js/index.js"></script>
<link rel="stylesheet" href="../css/index.css" />
</head>
<body>
<div id="scrollDiv">
<div>
<div><a href='http://www.miiceic.org.cn/'>石家庄</a></div>
<div><a href='http://www.ciitn.com/'>衡水</a></div>
<div><a href="http://www.amboedu.com/">邯郸</a></div>
</div>
</div>
</body>
</html> - 在index.css中设置css样式
div,div
{
margin:0;
padding:0
}
#scrollDiv
{
width:300px;
height:25px;
line-height:25px;
border:#ccc 1px solid;
overflow:hidden
}
#scrollDiv div
{
height:25px;
padding-left:10px;
} - 在index.js中设置JS事件
function AutoScroll(obj){
$(obj).find("div:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("div:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',1000)
});
