jQuery实现图标特效（精灵图）

最新推荐文章于 2023-02-02 14:40:44 发布

zeddme

最新推荐文章于 2023-02-02 14:40:44 发布

阅读量841

点赞数

分类专栏： js 文章标签： css js jquery

本文链接：https://blog.csdn.net/qq_44888570/article/details/109187014

版权

js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

常见的特效，用到了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>