<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
width: 200px;
}
.box li{
float: left;
width: 24px;
height: 24px;
margin: 15px;
background: url(sprite.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 number=i*44;
lis[i].style.backgroundPosition='0 -'+number+'px'
}
</script>
仿商城页面循环精灵图模块
最新推荐文章于 2024-08-20 13:42:14 发布