浅谈CSS Sprites切图技术性

日期:2021-01-20 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

HTML编码


拷贝编码
编码以下:

<body>
<!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} -->
<!-- 以上是Sublime Text迅速拼写 -->
<ul class="sprite">
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
<div class="clear"></div>
</ul>
</body>

CSS编码


拷贝编码
编码以下:

<style>
body { background-color: #fc0; color:#333;}
* {margin:0; padding:0;}
ul,li {list-style: none;}
a { color:#f00; font-weight: bold; text-decoration: none;}
.sprite {margin:0 auto; width:1000px; padding-top: 50px;}
.sprite li {float:left; margin-left: 50px; text-align: center; cursor:pointer; }
.sprite li s { display: block; width:132px; height:112px; background:url(all.png) no-repeat; }
.clear { clear:both;}
</style>

JS编码


拷贝编码
编码以下:

<script src="<a href="http://code.jquery.com/jquery-latest.js"></script">http://code.jquery.com/jquery-latest.js"></script</a>>
<script>
$(function () {
var iconH = $(".sprite").find("s").height(),
//找出储放照片的器皿的高宽比;
triggerLi = $(".sprite").children("li");
//找出每个li,放到1个数字能量数组中;
//console.log(iconH);
//在操纵台复印出器皿的高宽比;
triggerLi.each(function () {
//遍历数字能量数组中的每个li
var $this = $(this),
//申明自变量取值当今的li;
$index = $this.index();
//申明自变量储存当今li的index值;
//console.log($index);
//在操纵台复印出每个li的index值;
//console.log(iconH*$index);
//得出每个照片对应的position值;
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
//运用js遍历出每个s标识的情况照片;
$this.hover(function() {
//电脑鼠标移入
$this.children("s").css("background-position","⑴32px -"+iconH*$index+"px");
}, function() {
//电脑鼠标移出
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
});
})
})
</script>

IMG(右键储存便可,重取名all.png)

实际效果图

CSS Sprites优缺陷

优势

1.运用CSS Sprites能很好地降低网页页面的http恳求,从而大大的提升网页页面的特性,这也是CSS Sprites最大的优势,也是其被普遍散播和运用的关键缘故;
2.CSS Sprites能降低照片的字节,以前较为过量次3张照片合拼成1张照片的字节一直小于这3张照片的字节总和。
3.处理了网页页面设计方案师在照片取名上的困扰,只需对1张结合的照片上取名便可以了,不必须对每个小元素开展取名,从而提升了网页页面的制做高效率。
4.拆换设计风格便捷,只必须在1张或少张照片上改动照片的色调或款式,全部网页页面的设计风格便可以更改。维护保养起来更为便捷。

缺陷

诚然CSS Sprites是这般的强劲,可是也存在1些不能忽略的缺陷,以下:
1.在照片合拼的情况下,你要把多张照片井然有序的有效的合拼成1张照片,还要留好充足的室内空间,避免板块内出現无须要的情况;这些还好,最痛楚的是在宽屏,高辨别率的显示屏下的自融入网页页面,你的照片假如不足宽,很非常容易出現情况断裂;
2.CSS Sprites在开发设计的情况下较为不便,你要根据photoshop或别的专用工具精确测量测算每个情况模块的精准部位,这是针线活,没甚么难度,可是很繁琐;幸亏腾迅的鬼哥用ADOBE AIR开发设计了1个CSS Sprites 款式转化成专用工具,尽管也有1些应用上的不灵便,可是早已比photoshop精确测量来的便捷多了,并且款式立即转化成,拷贝,复制就OK!
3.CSS Sprites在维护保养的情况下较为不便,假如网页页面情况有少量修改,1般就要改这张合拼的照片,不用改的地区最好是不必动,这样防止修改更多的css,假如在原先的地区放不下,又只能(最好是)往下加照片,这样照片的字节就提升了,还要修改css。
4.CSS Sprites十分值得学习培训和运用,非常是网页页面有1堆ico(标志)。总而言之许多情况下大伙儿要衡量1下利与弊,再决策是否运用CSS Sprites。