精灵图使用——如何利用js循环实现精灵图设置

首先对于以下这些图标的设置，应该如何实现呢？

如果是还未学javascript时，我们一般会通过css样式一个个的给它们设置
background-position属性，这样会显得十分鸡肋！很麻烦！！！

在学习完js后我们可以通过DOM操作循环实现精灵图设置

1. 一般我们可以将一些小图标集成在一起（让网页美工来完成），我们我们可以得到这样一张精灵图（png格式）。注意：精灵图图片的排列是有规律的！！
//下图可直接复制使用

2. 利用切图工具找position位置
注意：用切图工具Adobe_Fireworks_CS6找位置position
（精灵图竖的排列是有讲究的，可以用循环一下子就显示出来！）

以下是html代码

以下是css源代码

 <style>* {list-style: none;margin: 0;padding: 0;}.box {width: 250px;height: 180px;margin: 100px auto;/* background-color: skyblue; */}.box li {float: left;width: 24px;height: 24px;background-color: pink;margin: 10px 0 30px 30px;background: url('../iconfont/img/jinglingtu.png') no-repeat;}</style>

以下是javascript代码段

<script>// 1.获取所有li 会形成伪数组var list = document.querySelectorAll('li');// 2.使用for循环来设置每个li的背景图for (var i = 0; i < list.length; i++) {// 通过设置精灵图的y坐标来设置不同li的背景图// 让索引号*44就是每个li的背景y坐标，index就是我们的y坐标var index = i * 44;// console.log(index);list[i].style.backgroundPosition = '0 -' + index + 'px';}</script>``````javascript

案例2：如何实现下图显示图标效果（给的精灵图是这个丫子的！）

先利用切图工具把它单独裁剪导出！

2.然后找出每个图标在切图工具Adobe_Fireworks_CS6中的x和y坐标。并找出它们的关系，我们可以写出js代码段（这里我测量的数据有点偏差！）

注意：一般把精灵图搞成全是一行或一列排列的话更好一些！（。注意：精灵图图片的排列是有规律的！！）

13点44分了！！！呃呃呃，时间不多了，该到吃饭的时候了。
第一次写博客（偷偷把csdn当成记笔记的地方了），不是很会组织语言，还请各位大佬见谅！如果有什么疑问和错误之处还请各位大佬们多多提出！小弟不胜感激！哈哈哈……

以下是代码段：如果需要素材的话，可以底下评论我发链接！


html代码段：<!--  生活服务模块 --><div class="lifeservice"><ul><li><i></i><p>话费</p></li><li><i></i><p>机票</p></li><li><i></i><p>电影票</p></li><li><i></i><p>游戏</p></li><li><i></i><p>彩票</p></li><li><i></i><p>加油卡</p></li><li><i></i><p>酒店</p></li><li><i></i><p>火车票</p></li><li><i></i><p>众筹</p></li><li><i></i><p>理财</p></li><li><i></i><p>礼品卡</p></li><li><i></i><p>白条</p></li></ul></div>css代码：
/* 生活服务模块 */
.newsflash .lifeservice{height: 210px;/* background-color: purple; */border: 1px solid #e4e4e4;border-top: 0;/* 将超出盒子的内容隐藏 */overflow: hidden;
}
.lifeservice ul {/*如果li不能在一行排满，宽度超出了lifeservice盒子 */width: 252px;height: 100%;
}.lifeservice ul li{float: left;width: 63px;height: 70px;/* text-align：center只对行内元素和行内块元素有效！ */text-align: center;/* background-color:pink; */border-bottom: 1px solid #e4e4e4;border-right: 1px solid #e4e4e4;
}
.lifeservice  li i{display: inline-block;    width: 26px;height: 25px;/* background-color: rgb(14, 2, 4); */margin-top: 13px;background: url('../imgs/jingling2.png') no-repeat;
}

javascript代码段：

 // 循环设置lifeservice里面的i标签的精灵图为背景图标/* 1.获取所有i 会形成伪数组  */var icons = document.querySelector('.lifeservice').querySelectorAll('i');// console.log(icons);/* 2.使用for循环来设置每个li的背景图 */var countX = 0;var countY = 0;for (var i = 0; i < icons.length; i++) {// 通过设置精灵图的x和y坐标来设置不同li的背景图// console.log(icons.length);var index_x = countX * 62;var index_y = countY * 72;icons[i].style.backgroundPosition = '-' + index_x + 'px  -' + index_y + 'px';//console.log(index_x);//console.log(index_y);countX++;if ((i + 1) % 4 == 0) {countX = 0;countY++;}}

精灵图使用——如何利用js循环实现精灵图设置相关推荐

利用js实现轮播图（上一张，下一张，选取第几张，动画等）
今天来说一下利用js实现轮播图效果思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'><div class=&qu ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
Chevereto图床搭建 | 利用云服务器搭建免费图床完整教程
前言: 手里有台香港阿里云机器,不知道干什么好,干脆拿来做些小实验,呆在家里防疫都已经快长毛了...博客上的图片本来是托管在阿里云OSS上的,但是感觉管理起来不是很方便.而且本来很好用的 SM.MS ...
python制作雷达图_如何利用Python matplotlib绘制雷达图
本篇文章介绍使用matplotlib绘制雷达图. 雷达图也被称为网络图,蜘蛛图,星图,蜘蛛网图,是一个不规则的多边形.雷达图可以形象地展示相同事物的多维指标,雷达图几乎随处可见,应用场景非常多. 一. ...
python画折线图详解-利用python画出折线图
本文实例为大家分享了python画折线图的具体代码,供大家参考,具体内容如下 # encoding=utf-8 import matplotlib.pyplot as plt from pylab i ...
JS循环精灵图背景-遍历背景图片
利用for循环设置一组元素的精灵图背景如果用css做,需要每个小盒子都设置一遍,才能得到相应的图标分析: 1.首先精灵图图片排列是有规律的 2.核心:利用for循环,修改背景位置精灵图来源:卷皮 ...
css+js制作循环轮播图——可滑动
先上效果图: (1)自动切换 (2)手动拖拽 HTML <div id="adbox" class="adbar"><img src=&quo ...
vue中利用gif.js实现GIF动图下载
前言 gif.js可以将帧图或者canvas拼成新的gif,gif.js没有npm install的库,引用方式如下: 1. 下载资源首先从官方仓库上下载代码,worker不能跨域,所以资源必然是放 ...
利用JS中的循环语句来实现正方形、长方形、平行四边形、三角形、菱形、空心菱形。
利用JS来制造图形代码 1.正方形 2.长方形 3.平行四边形 4.三角形 5.菱形 6.空心菱形 7.效果图总结代码 1.正方形代码如下(示例): <script>for (va ...

精灵图使用——如何利用js循环实现精灵图设置

精灵图使用——如何利用js循环实现精灵图设置相关推荐

最新文章

热门文章