当前位置:首页 > 开发 > Web前端 > Jquery > 正文

JQuery设置数据滑动展示效果

发表于: 2015-06-05   作者:chenyue1   来源:转载   浏览次数:
摘要: 新建一个index.html页面,写入代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>数据轮滑效果</title> <script type
  • 新建一个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设置数据滑动展示效果

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
看到jQuery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个。 其中的难
滑动展示效果主要用在图片或信息的滑动展示,也可以设置一下做成简单的口风琴(Accordion)效果。
在线演示1 在线演示2 在线演示3 本地下载 大家可能经常需要展示数据或者报表,表头如果滚动上去后,
在线演示1 在线演示2 在线演示3 本地下载 大家可能经常需要展示数据或者报表,表头如果滚动上去后,
在线演示1 在线演示2 在线演示3 本地下载 大家可能经常需要展示数据或者报表,表头如果滚动上去后,
先看Html: HTML 代码 <div id="photoShow"> <div class="photo"> <img src="p1.jpg
在线演示1 在线演示2 在线演示3 本地下载 大家可能经常需要展示数据或者报表,表头如果滚动上去后,
先看Html: HTML 代码 <div id="photoShow"> <div class="photo"> <img src="p1.jpg
<!-- google_ad_client = "pub-4490194096475053"; /* 内容页,300x250,第一屏 */ google_ad_slot
先看Html: HTML 代码 <div id="photoShow"> <div class="photo"> <img src="p1.jpg
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号