首先对于以下这些图标的设置,应该如何实现呢?
如果是还未学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++;
}
}