淺談CSS Sprites切圖技術(shù)

2024-07-11 08:30:17

字體：大中小

供稿：網(wǎng)友

HTML代碼

復(fù)制代碼

代碼如下:
<body>


<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代碼

復(fù)制代碼

代碼如下:
<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代碼

復(fù)制代碼

代碼如下:
<script src="<a ></script</a>>
<script>
$(function () {
var iconH = $(".sprite").find("s").height(),
//找出存放圖片的容器的高度;
triggerLi = $(".sprite").children("li");
//找出每一個(gè)li,放到一個(gè)數(shù)組中;
//console.log(iconH);
//在控制臺(tái)打印出容器的高度;
triggerLi.each(function () {
//遍歷數(shù)組中的每一個(gè)li
var $this = $(this),
//聲明變量賦值當(dāng)前的li;
$index = $this.index();
//聲明變量保存當(dāng)前l(fā)i的index值;
//console.log($index);
//在控制臺(tái)打印出每一個(gè)li的index值;
//console.log(iconH*$index);
//得出每一個(gè)圖片對(duì)應(yīng)的position值;
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
//利用js遍歷出每一個(gè)s標(biāo)簽的背景圖片;
$this.hover(function() {
//鼠標(biāo)移入
$this.children("s").css("background-position","-132px -"+iconH*$index+"px");
}, function() {
//鼠標(biāo)移出
$this.children("s").css("background-position","0 -"+iconH*$index+"px");
});
})
})
</script>

上一篇：動(dòng)態(tài)的樣式語(yǔ)言less語(yǔ)法詳解之混合屬性

下一篇：CSS3屬性background-size使用指南

發(fā)表評(píng)論

共有條評(píng)論