zoukankan      html  css  js  c++  java
  • jQery无缝滚动效果

    思路:

    赋值所有li,添加到ul末尾,重新计算ul宽度

    每次移动一个固定的值,当超出一半时,将ul拉回原位

    以下代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>无缝滚动</title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                img{
                    display: block;
                }
                ul,li{
                    list-style: none;
                }
                #box{
                     440px;
                    height: 88px;
                    margin: 50px auto;
                    border: 3px solid #DCDCDC;
                    position: relative;
                    overflow: hidden;
                }
                #list{
                    position: absolute;
                }
                #list li{
                    float: left;
                     88px;
                    height: 88px;
                }
            </style>
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <script type="text/javascript">
                $(function(){
                    //将ul的内容复制一遍添加到ul中,
                    $('#list').append($('#list').html());
                    //改变list的长度
                    $('#list').width($('#list li').eq(0).width() * $('#list li').length)
                    setInterval(move,10)
                })
                var x = 0; //每次移动的长度
                function move(){
                    //判读超过ul的一半,拉回来重新开始
                    if(x <= -($('#list').width()/2)){
                        x = 0;
                    }
                    $('#list').css('left',x)
                    x-=1;
                }
            </script>
        </head>
        <body>
            <div id="box">
                <ul id="list">
                    <li><img src="img/1.jpg" alt="" /></li>
                    <li><img src="img/2.jpg" alt="" /></li>
                    <li><img src="img/3.jpg" alt="" /></li>
                    <li><img src="img/4.jpg" alt="" /></li>
                    <li><img src="img/5.jpg" alt="" /></li>
                </ul>
            </div>
        </body>
    </html>
    代码的世界水太深,潜行的心态很纯真!
  • 相关阅读:
    3.6
    2.26
    2.22
    出差记录(每日食谱)
    关于本博客的样式
    知乎搜索/(引擎)的故事
    【历史/对越自卫反击战】刘立华||我的战地笔记——陵园祭
    如何在Xpath路径中添加变量?如何将字符串传递给Xpath?
    阿里网盘搜索网站汇总
    经济学人下载
  • 原文地址:https://www.cnblogs.com/Q-zhangsan/p/6127981.html
Copyright © 2011-2022 走看看