CSS的background属性中url精灵图(Logo图标)定位问题

最新推荐文章于 2024-05-06 22:33:41 发布

未听风吹雨

最新推荐文章于 2024-05-06 22:33:41 发布

阅读量1.1w

点赞数 1

分类专栏： jQuery 文章标签： CSS jQuery html

本文链接：https://blog.csdn.net/qq_38104151/article/details/81459252

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS的background属性中url精灵图(Logo图标)定位问题

最近在学习jQuery的练习中被视频中的精灵图定位弄晕了，视频中的精灵图是条状的，我的图片素材是随便找的一个是块状的，而且视频中的参数都是发布视频的人提前弄好的。
这是我找到的图片如下:

bg.png（图片来自千库网）

这里写图片描述

代码块

代码是做一个鼠标放上去可以向上滑动，接着坐标跳到下方，回到初始位置，例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>49-图标特效</title>
    <link rel="stylesheet" href="">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 480px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        ul>li{
            width: 120px;
            height: 140px;
            margin-top: 50px;
            text-align: center;
            float: left;
            overflow: hidden;
        }
        ul>li>span{
            display: inline-block;
            width: 110px;
            height: 110px;
            /*background: url("images/bg.png") no-repeat 0 0;*/
            position: relative;

        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>    
        $(function(){
            //1.遍历所有的li
            $("li").each(function(index, ele) {
                //1.1生成心得图片位置
                if(index < 4){
                    var $url = "url(\"images/bg.png\") no-repeat "+(index * -192)+"px" +" 0";
                }else{
                    var $url = "url(\"images/bg.png\") no-repeat "+((index-4) * -192)+"px" + " -238px";
                }
                //1.2设置新的图片位置
                $(this).children("span").css("background", $url);
            });

            //2.监听li移入事件
            $("li").mouseenter(function() {
                //2.1将图标往上移动
                $(this).children("span").animate({
                    top: -110
                }, 1000, function(){
                    //2.2将图片往下移动
                    $(this).css("top", "110px");
                    //2.3将图片复位
                    $(this).animate({
                        top:0
                    }, 1000)
                });
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>
            <span></span>
            <p>QQ好友</p>
        </li>
        <li>
            <span></span>
            <p>QQ空间</p>
        </li>
        <li>
            <span></span>
            <p>朋友圈</p>
        </li>
        <li>
            <span></span>
            <p>腾讯微博</p>
        </li>
        <li>
            <span></span>
            <p>微信好友</p>
        </li>
        <li>
            <span></span>
            <p>朋友圈</p>
        </li>
        <li>
            <span></span>
            <p>新浪微博</p>
        </li>
        <li>
            <span></span>
            <p>人人网</p>
        </li>
    </ul>
</body>
</html>

图标滑动弹出整体代码1.

精灵图中各个图标距离间距分析

图标的大小大致为110px*110px图标左边的参考线到到图标右边参考线为192px，图标上边的参考下到下方图标的上方参考线距离为238px
这里写图片描述
谷歌浏览器上的控制台如下显示span元素中的
background:url(“images/bg.png”) 0px 0px no-repeat;
其中的两个坐标是以image下bg.png这个元素的左上角为坐标原点，拖span元素左上角的距离。(不能视为第四象限中点)
以bg.png精灵图中的朋友圈logo为例，要将它显示出来，则有
第一个坐标：-192px，将span相对于bg.png(左上角为原点O)向右移动192px
第二个坐标：-238px，将span相对于bg.png(左上角为原点O)向下移动238px
控制台信息如下
这里写图片描述

代码中的ul包含8个li元素，它们是从0到7的伪数组,其中的jQuery代码中li数组的each遍历如下，li序列小于4的就取bg.png图片中的第一行中的图标，大于等于4的就取bg.png图片中的第二行中的图标。

$("li").each(function(index, ele) {
                //1.1生成心得图片位置
                if(index < 4){
                    var $url = "url(\"images/bg.png\") no-repeat "+(index * -192)+"px" +" 0";
                }else{
                    var $url = "url(\"images/bg.png\") no-repeat "+((index-4) * -192)+"px" + " -238px";
                }
                //1.2设置新的图片位置
                $(this).children("span").css("background", $url);
            });

大家可以尝试着换成第三行的图标，体验并理解一下background中url精灵图的定位。

这里是脚注的内容. ↩

未听风吹雨

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS的background属性中url精灵图(Logo图标)定位问题

CSS的background属性中url精灵图(Logo图标)定位问题最近在学习jQuery的练习中被视频中的精灵图定位弄晕了，视频中的精灵图是条状的，我的图片素材是随便找的一个是块状的，而且视频中的参数都是发布视频的人提前弄好的。这是我找到的图片如下:bg.png（图片来自千库网）代码块代码是做一个鼠标放上去可以向上滑动，接着坐标跳到下方，回到初始位置，例如：...
复制链接

扫一扫