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精灵图的定位。
- 这里是 脚注 的 内容. ↩