CSS Sprite 圖標

時間 2019-11-20

標籤 css sprite 圖標欄目 CSS 简体版

原文原文鏈接

HTMLcss

 1 <body>
 2     <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} -->
 3     <!-- 以上是Sublime Text快速拼寫 -->
 4     <ul class="sprite">
 5         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
 6         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
 7         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
 8         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
 9         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>
10         <div class="clear"></div>
11     </ul>
12 </body>

CSSjquery

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

JS數組

 1 <script src="http://code.jquery.com/jquery-latest.js"></script>
 2     <script>
 3     $(function () {
 4         var iconH = $(".sprite").find("s").height(),
 5             //找出存放圖片的容器的高度;
 6             triggerLi = $(".sprite").children("li");
 7             //找出每個li,放到一個數組中;
 8         //console.log(iconH);
 9         //在控制檯打印出容器的高度;
10         triggerLi.each(function () {
11         //遍歷數組中的每個li
12             var $this = $(this),
13                 //聲明變量賦值當前的li;
14                 $index = $this.index();
15                 //聲明變量保存當前li的index值;
16             //console.log($index);
17             //在控制檯打印出每個li的index值;
18             //console.log(iconH*$index);
19             //得出每個圖片對應的position值;
20             $this.children("s").css("background-position","0 -"+iconH*$index+"px");
21             //利用js遍歷出每個s標籤的背景圖片;
22             $this.hover(function() {
23                 //鼠標移入
24                 $this.children("s").css("background-position","-132px -"+iconH*$index+"px");
25             }, function() {
26                 //鼠標移出
27                 $this.children("s").css("background-position","0 -"+iconH*$index+"px");
28             });
29         })
30     })
31     </script>

IMG(右鍵保存便可,重命名all.png)this

SHOWurl

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。