请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

JS循环输出精灵图,单图实现按钮定位

 
一、html结构代码:
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
....
</ul>
</div>

二、素材准备
将所有图标做在一张长图中,一行一个图标图片,图片之间间隔44PX

三、页面插入如下JS代码:
<script>
// 1.获取元素所有的小li
var lis = document . querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {

//让索引号乘以44就是每个li的背景y坐标,因为图片是一列长图,X坐标为零, index就是我们的y坐标。图1坐标(0,0),图2坐标(0,-44),依次规律。

var index=i*44;
lis[i]. style. backgroundPosition = '0  -' + index + 'px';
</script>

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。