CSS Sprite (JS)_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

CSS Sprite (JS)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:52 AM

HTML

 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>

登入後複製

CSS

 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>

登入後複製

 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         //遍历数组中的每一个li12             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)

SHOW

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

Related knowledge

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。