循环精灵图

js应用的轮回和东西元素的获取不断都是被把持来完成精灵图的造造。

后果图:

轮回精灵图_i++

设法如下:

轮回精灵图_i++_02

以上是html构造。

<div class="fd871a017269f98c 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>

以下款式:

<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: pink; margin: 15px; background: url(images/sprite.png) no-repeat; }</style>

Js代码如下:

<script> var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { var index = i * 44; lis[i].style.backgroundPosition = '0 -' + index + 'px'; } </script>

您可以还会对下面的文章感兴趣:

暂无相关文章

最新评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。