點擊按鈕等實現li標簽的左右橫向移動+動畫

本文轉載自查看原文 2020-12-01 14:14 462

效果圖：

點擊按鈕等實現li標簽的左右橫向移動,這里限制每個li的寬度一樣

代碼：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>點擊按鈕等實現li標簽的左右橫向移動,這里限制每個li的寬度一樣</title>
        <style></style>
    </head>
    <body>
        <button type="button" id="moveleft"><</button>
        <div class="timer" id="maincontent" style="width: 1000px; background: yellow; overflow: hidden;display: inline-block;">
            <ul id="testUl" style="white-space:nowrap;padding-left: 0;">
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年8月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年7月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年6月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年5月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年4月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年3月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年1月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2016年9月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2016年8月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年q月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年w月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年e月</button></li>
            </ul>
        </div>
        <button type="button" id="moveright">></button>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            //這里li的左右滾動demo限制每個li的寬度一樣,每次移動一個li的寬度包含間距
            //ul標簽下的li數量
            var lengli = $("#testUl li").length;
            console.log(lengli);
            
            //所有li的總寬度包含間距
            var sumWidth =0;
            $("ul").find("li").each(function(){
            sumWidth += ($(this).width()+50);
            });
            console.log(sumWidth);

            //每個li加間距的寬度
            var liWidth = 79.73+50;
            var count =(sumWidth-$("#maincontent").width())/liWidth
            if(count%1 >0){
                count = parseInt(count)+1
            }
            console.log(count);
        
            var num = 0;
            $("#moveleft").click(function() {
                var scrleft = $("#maincontent").scrollLeft();

                if(num<count){
                    //alert("當前到左側距離："+scrleft+"；div總寬度："+$("#maincontent").width()+"可左移次數："+count);
                    num++;
                    $("#maincontent").animate({
                        scrollLeft: (liWidth * num)
                    }, 500);
                }
                
            })


            $("#moveright").click(function() {
                if(num >0){
                    alert(1);
                    num--;
                    $("#maincontent").animate({
                        scrollLeft: (129.73 * num)
                    }, 500);
                }
                
            })
        </script>
    </body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ul、li實現橫向導航按鈕 ul內的li橫向排列左右滑動 WPF左右移動動畫實現點擊按鈕表單元素左右移動 JQuery移動動畫實現點擊按鈕切換圖片--JQuery基礎用vue實現點擊編輯按鈕將li變為可以輸入文本的input vue.js如何實現點擊按鈕動態添加li css-li標簽橫向排列 Android動畫：模擬開關按鈕點擊打開動畫（屬性動畫之平移動畫） Echarts動畫效果：實現數據左右移動