欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JQuery设置数据滑动展示效果 博客分类： JQuery 数据滑动 JQuery 

程序员文章站 2024-03-15 16:49:54
...
  • 新建一个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)
        });
     
相关标签： JQuery

上一篇： JSON解析 iosjsonObjective-C 

下一篇： SVN在终端的使用 svnObjective-C 

推荐阅读