首页 > 代码库 > CSS Sprite (JS)
CSS Sprite (JS)
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
CSS Sprite (JS)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。