jQuery實現圖示特效（精靈圖）

zeddme發表於2020-10-20
jQuery特效

常見的特效，用到了CSS的精靈圖，jQuery程式碼稍微複雜點，筆者會講解重點。
PS：為啥筆者的圖示缺三個？因為隨手百度的精靈圖只有五個圖示，也懶得換，大家找個多一點的就行了。

效果圖在這裡插入圖片描述

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 150px auto;
            list-style: none;
        }

        ul > li {
            float: left;
            width: 80px;
            line-height: 100px;
            padding-left: 20px;
            position: relative;
            overflow: hidden;
        }

        ul > li:nth-child(-n+4) {
            margin-top: 50px;
        }

        ul > li > span {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url("img/jlt/精靈圖.png") no-repeat 0 0;
            border-radius: 50%;
            position: absolute;
            top: 5%;
        }
    </style>
    <body>
<ul>
    <li><span></span>圖示</li>
    <li><span></span>圖示</li>
    <li><span></span>圖示</li>
    <li><span></span>圖示</li>
    <li><span></span>圖示</li>
    <li><span></span>圖示</li>
    <li><span></span>圖示</li>
    <li><span></span>圖示</li>
</ul>
</body>

ul > li:nth-child(-n+4) 這句話的意思是ul 的子元素li（不包括後代的li）中的前四個。

<script>
        $(function () {
            var lis = $('li');
            lis.each(function (index, ele) {
                var url = 'url("img/jlt/精靈圖.png") no-repeat 0 ' + (index * -52) + 'px';
                $(this).children('span').css('background', url);
                console.log(url);
            })
            lis.mouseenter(function () {
                //animate無法修改顏色
                $(this).children('span').animate({
                    top: '-50%',
                }, 300, function () {
                    $(this).css('top', '50%');
                })
                $(this).children('span').animate({
                    top: '5%'
                }, 300, function () {
                    $(this).stop(true);
                })

            })
        });
    </script>

第一個each迴圈就是設定精靈圖的位置，讓他露出不同的圖示，這也是精靈圖的大概原理。剩餘部分基本就是在講animate()方法，筆者之前的文章有詳細講到。 jQuery中的animate()方法是無法更改顏色的。

如果有疑問，歡迎各位留言或者私信，覺得不錯的就點個贊吧~！

相關文章