淘宝精灵图循环
案例要用到的圖片：右鍵--選擇圖片另存為可保存。
案例分析：
-
首先由于精靈圖圖片排列是有規律的
-
核心思路：利用for循環 修改精靈圖片的背景位置 background-position
-
讓循環里面的 i 索引號*44就是每個圖片的 y 坐標
案例源碼：
<style>* {margin: 0;padding: 0;}li {list-style-type: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background-color: red;margin: 15px;background: url(taobaoBackground.png) no-repeat;}</style> </head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {var y = -44 * i;lis[i].style.backgroundPosition = '0 ' + y + 'px';}</script> </body></html>最終實現的效果：?
?
?遇到了一個問題，就是backgroundPosition中少打了一個S，也沒報錯信息，折騰了好久，大家寫代碼的時候要細心哦！！！
總結
- 上一篇： Redhat7.4 同步阿里云镜像rpm
- 下一篇： surface pro java_平板界