CSS Sprite (JS)_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:52:35
원래의
882명이 탐색했습니다.

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>
로그인 후 복사

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

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!