点击按钮等实现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动画效果：实现数据左右移动