jQuery 效果

jQuery animate（）方法

定义和用法

animate()方法执行css属性集的自定义动画。

(selector).animate({styles},speed,easing,callback)

案例：

横向点击元素，滚动至居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
        <title>css3 title 滑动显示</title>
        
        <style>
            .tab {
                width: 100%;
                background: #fff;
                overflow: auto;
            }
            /* 隐藏滚动条 */
            .tab::-webkit-scrollbar {
                display: none;
            }
            .tab-ul {
                display: flex;
                display: -webkit-flex;
                padding: 0;
            }
            .tab-ul li {
                flex: 0 0 20%;
                text-align: center;
                list-style: none;
            }
            .tab-ul li.active {
                background: pink;
            }
        </style>
    </head>
    <body>
        <div class="tab">
            <ul class="tab-ul">
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ul>
        </div>
        
        <script src="jquery.min.js"></script>
        
        <script>
            $(function(){
                //创建点击事件
                $('.tab-ul li').on('click', function() {
                    //修改点击后的样式
                    $('.tab-ul li').removeClass('active');
                    $(this).addClass('active');
                    
                    //距离浏览器左侧的距离
                    var liLeft = $(this).offset().left;
                    //该元素宽度的一半
                    var liWidth = $(this).width()/2;
                    //浏览器宽度的一半
                    var widths = $(window).width()/2;
                    //scrollL滚动的距离
                    var scrollL = $('.tab').scrollLeft();
                    //滚动动画（控制滚动速度）
                    $('.tab').animate({
                        scrollLeft: scrollL + (liLeft - widths) + liWidth
                    })
                })
            })
        </script>
    </body>
</html>
​
​

 

posted @ 2022-03-15 19:14  东八区  阅读(39)  评论(0)    收藏  举报