JS循环精灵图背景-遍历背景图片

利用for循环设置一组元素的精灵图背景

如果用css做，需要每个小盒子都设置一遍，才能得到相应的图标

分析：

1、首先精灵图图片排列是有规律的

2、核心：利用for循环，修改背景位置

精灵图来源：卷皮官网

分析：先用盒子将内容进行排版

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.dabox {width: 320px;height: 400px;margin: 0 auto;margin-top: 10px;border: 1px solid black}.box {width: 300px;height: 350px;background-color: pink;margin-top: 10px;margin-left: 10px;}.tu {width: 24px;height: 24px;display: inline-block;margin-left: 20px;background-image: url(ct_icons.png);vertical-align: text-top;}dd {background-color: white;width: 150px;height: 50px;margin-left: 0px;float: left;position: relative;text-align: center;line-height: 50px;border-bottom: 1px solid grey;}a {font-size: 15px;color: black;text-decoration: none;}p {position: absolute;left: 145px;top: -10px;display: inline-block;text-align: center;line-height: 30px;color: grey;}</style>
</head><body><div class="dabox"><div class='box'><dl><dd><a href="#"><div class="tu"></div> 女装<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 男装</a></dd><dd><a href="#"><div class="tu"></div> 鞋子<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 箱包</a></dd><dd><a href="#"><div class="tu"></div> 母婴<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 美妆</a></dd><dd><a href="#"><div class="tu"></div> 居家<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 家纺</a></dd><dd><a href="#"><div class="tu"></div> 文体<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 美食</a></dd><dd><a href="#"><div class="tu"></div> 数码<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 电器</a></dd><dd><a href="#"><div class="tu"></div> 内衣<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 配饰</a></dd></dl></div></div><script>var tu = document.querySelectorAll('.tu')for (var i = 0; i < tu.length; i++) {var index = i * 24tu[i].style.backgroundPosition = '-' + index + 'px 0px'}</script>
</body></html>

添加鼠标经过时，图片变成红色：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.dabox {width: 320px;height: 400px;margin: 0 auto;margin-top: 10px;border: 1px solid black}.box {width: 300px;height: 350px;background-color: pink;margin-top: 10px;margin-left: 10px;}.tu {width: 24px;height: 24px;display: inline-block;margin-left: 20px;background-image: url(ct_icons.png);vertical-align: text-top;background-position-y: 0px;}dd {background-color: white;width: 150px;height: 50px;margin-left: 0px;float: left;position: relative;text-align: center;line-height: 50px;border-bottom: 1px solid grey;}a {font-size: 15px;color: black;text-decoration: none;}p {position: absolute;left: 145px;top: -10px;display: inline-block;text-align: center;line-height: 30px;color: grey;}a:hover .tu {background-position-y: -24px;}a:hover {color: red}</style>
</head><body><div class="dabox"><div class='box'><dl><dd><a href="#"><div class="tu"></div> 女装<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 男装</a></dd><dd><a href="#"><div class="tu"></div> 鞋子<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 箱包</a></dd><dd><a href="#"><div class="tu"></div> 母婴<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 美妆</a></dd><dd><a href="#"><div class="tu"></div> 居家<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 家纺</a></dd><dd><a href="#"><div class="tu"></div> 文体<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 美食</a></dd><dd><a href="#"><div class="tu"></div> 数码<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 电器</a></dd><dd><a href="#"><div class="tu"></div> 内衣<p>|</p></a></dd><dd><a href="#"><div class="tu"></div> 配饰</a></dd></dl></div></div><script>var tu = document.querySelectorAll('.tu')for (var i = 0; i < tu.length; i++) {var index = i * 24tu[i].style.backgroundPositionX = '-' + index + 'px'}</script>
</body></html>

主要修改的是背景图的x，y坐标，注意精灵图的使用，并且再script中驼峰命名法的书写方式

注意图片和文字的对齐方式： vertical-align: text-top;

var index = i * 24
tu[i].style.backgroundPositionX = '-' + index + 'px'

注意书写

JS循环精灵图背景-遍历背景图片相关推荐

本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
JS入门笔记九：循环精灵图案例
在开发中,精灵图往往是按照一定规律制作的,前端程序员往往可以借助其规律来快速制作相应的图标,提升开发效率. 操作步骤: 1.寻找精灵图的排布规律 2.按照规律改变背景位置以淘宝为例这是淘宝精灵图的 ...
CSS 精灵图的使用；精灵图不见了；如果一次性设置多个精灵图
1. 先来一波排错: 为什么精灵图无法显示? 容器太小,图片显示不全容器是行内元素,没有内容,宽高没有撑开.可以转化为块级/行内块,设置宽高背景图片的url地址写错检查背景图片绝对引用/相对引用 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
android 精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
HTML网页精灵图的使用
精灵图的使用我们在制作网页的时候有些图片是在一起的,没有办法进行插入图片,这样精灵图的使用就帮助我们解决了这一问题.一下方式为例: 图片: 精灵图使用的代码图片: 具体为: .good{h ...
css进阶：精灵图的使用、实现用精灵图拼出名字
目录 1.精灵图的用途 2. 精灵图(sprites)的使用 2.1 原理 2.2 总结 3. 案例:用精灵图拼出名字 3.1 效果图 3.2 代码 1.精灵图的用途为了有效地减少服务器接收和请求的 ...
html中精灵图的使用方法,css sprites（精灵图）如何使用？
CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...
控制精灵图大小和位置
问题:精灵图和精灵图中的小图片大小与开发需要的大小不一样,需要修改精灵图.或者修改精灵图中小图片的大小尺寸.但是在修改过程中会遇到精灵图大小和定位错乱的情况,如何解决?解决:精灵图中小图片的宽高缩放多 ...

JS循环精灵图背景-遍历背景图片

JS循环精灵图背景-遍历背景图片相关推荐

最新文章

热门文章