本文內容是用兩種不同的方法實現一個簡單的是文字無縫循環(向上)的效果,向左、向右或向下無縫循環原理相同,文字換成圖片同理。
運行效果圖:


image.png

方法一效果原理:
定時器+內容插入和底部高度animate變化。


image.png

image.png

方法一代碼:(本文使用的jQuery版本是1.11.3,在低版本IE及W3C瀏覽器中效果相同)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #bor{
                width: 500px;
                height: 40px;
                margin: 200px auto;
                border: 2px black solid;
                position: relative;
                overflow: hidden;
            }
            #bor ul{
                position: absolute;    
                bottom: -40px;
            }
            #bor ul li{
                width: 500px;
                height: 40px;
                list-style: none;
                line-height: 40px;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">

            $(function(){
                setInterval(function(){
//                代碼實現
//                var f = $("#bor ul li").first().height(0);
//                $("#bor ul").append(f);
//                $("#bor ul li").last().animate({'height':'40px'},500);

//                使用jQuery鏈式效果實現:
                $("#bor ul").append($("#bor ul li").first().height(0).animate({'height':'40px'},500));
                },2000)
            })
        </script>
    </head>
    <body>
        <div id="bor">
            <ul>
                <li style="background: red;">Google 官方推出應用開發架構指南</li>
                <li style="background: paleturquoise;">一張圖,三分鐘,掌握 Swift和Kotlin</li>
                <li style="background: greenyellow;">MaterialDesign之對TabLayout的探索</li>
                <li style="background: orange;">你可能沒注意到 Handler 的這些問題</li>
                <li style="background: deepskyblue;">橫向列表摺疊和縮放的自定義 ViewGroup</li>
            </ul>
        </div>
    </body>
</html>

方法二效果原理:
定時器和效果animate結合


image.png

image.png

方法二代碼:(本文使用的jQuery版本是1.11.3,在低版本IE及W3C瀏覽器中效果相同)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #bor{
                width: 500px;
                height: 40px;
                margin: 200px auto;
                border: 2px black solid;
                position: relative;
                overflow: hidden;
            }
            #bor ul{
                top: 0px;
                position: absolute;    
            }
            #bor ul li{
                width: 500px;
                height: 40px;
                list-style: none;
                line-height: 40px;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">

            $(function(){
                var i=0;//記錄變化次數
                setInterval(function(){
                    i++;
                    //如果是最後條進行判斷
                    if(i==6){
                        i=1;
                        //ul top變為0
                        $("#bor ul").css({'top':'0px'});
                    }
                    var t = i*-40; 
                    console.log('===='+t);
                    $("#bor ul").animate({'top':t+'px'},300);
                },1000)
            })
        </script>
    </head>
    <body>
        <div id="bor">
            <ul>
                <li style="background: red;">Google 官方推出應用開發架構指南</li>
                <li style="background: paleturquoise;">一張圖,三分鐘,掌握 Swift和Kotlin</li>
                <li style="background: greenyellow;">MaterialDesign之對TabLayout的探索</li>
                <li style="background: orange;">你可能沒注意到 Handler 的這些問題</li>
                <li style="background: deepskyblue;">橫向列表摺疊和縮放的自定義 ViewGroup</li>
                <li style="background: red;">Google 官方推出應用開發架構指南</li>
            </ul>
        </div>
    </body>
</html>

如有問題歡迎交流。

如轉載請註明出處,謝謝!