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

最新推荐文章于 2024-08-04 22:38:35 发布
最新推荐文章于 2024-08-04 22:38:35 发布
阅读量1.5k 收藏 8
点赞数 1
分类专栏： 前端学习 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45387575/article/details/123018469
版权

利用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 * 24
            tu[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 * 24
            tu[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'

注意书写

一夕ξ
关注
专栏目录
循环精灵图案例
weixin_71181899的博客
06-19 195
①首先精灵图图片排列有顺序②核心思路：利用 for循环 修改精灵图片的背景位置background-position③让循环里面的i索引号*44就是每个图片的y坐标
javascript 精灵图利用循环添加
m0_53961495的博客
03-19 137
<!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>Do
【Web APIs】JavaScript 操作元素 ⑦ ( 多精灵图背景设置 | 核心要点 - 设置 backgroundPosition 属性 | 清除默认样式 | )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-04 2220
一、案例需求 二、案例核心要点分析 1、清除元素的默认内外边距样式 ★ ( 重点 ) 2、清除 li 元素的默认样式 3、ul 和 li 元素的块级元素本质 4、为 li 元素设置浮动 ★ ( 重点 ) 5、精灵图设置要点 ★ ( 重点 ) - 设置 backgroundPosition 属性 三、完整代码示例 1、代码示例 2、执行效果
前端学习（829）：循环精灵图背景
歌谣的博客
04-12 352
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
五彩导航栏
Lily3619的博客
08-26 328
<!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>Do
五彩导航代码（HTML）
2203_75370027的博客
05-12 1359
五彩导航
循环精灵图背景（55）
weixin_45147894的博客
07-05 264
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl...
js 特效 html 特效 彩色导航条
06-13
js 特效 html 特效 彩色导航条 js 特效 html 特效 彩色导航条
javascript简单实现图片预加载
12-09
函数内部，通过一个for循环遍历所有参数，并为每个图片创建一个新的`Image`对象，然后设置该对象的`src`属性为对应的图片URL。这样，图片的加载就会在后台进行，而不会阻塞浏览器的主线程。 以下是这个预加载函数的...
H5宝可梦精灵球背景动画特效
07-24
然后，通过requestAnimationFrame()函数来创建连续的动画帧，每次循环遍历数组，更新每个精灵球的位置，清除旧的画布内容，再绘制新的状态，从而形成连贯的动画效果。同时，为了增加真实感，还可以添加随机因素，...
javascript关于循环精灵图的小案例
weixin_45533907的博客
08-01 360
关于精灵图的那些小事，写的时候竟然认为精灵图直接可以从js生成，楼主你笑了吗？？emmm~~~ 实在是没有找到合适的精灵图，就先不找图片了 CSS代码 ul{ width: 375px; height: 361px; } ul li{ width: 100px; height: 100px; margin-left: 15px; margin-top: 15px; background-co
广告图片切换(js遍历文件夹)
01-07
主要实现根据日期和时间js循环读取文件夹里面的图片， 然后显示，有百叶窗，卷帘等效果
基于JavaScript的图片播放器
08-15
JavaScript的数组和循环结构可以用于存储和遍历图片列表，而函数可以封装重复的操作，提高代码的可读性和复用性。 为了实现图片的切换效果，JavaScript可能涉及了时间管理和动画框架，比如使用`...
WebAPI 操作元素案例 —— 循环精灵图背景
赚钱养自个儿的博客
04-15 427
学习来源：https://www.bilibili.com/video/BV1HJ41147DG     要求  利用for循环设置一组元素的精灵图背景 思路  1、精灵图图片排列是有规律的  2、利用for循环修改精灵图片的背景位置 background-position  3、让循环里的i索引号*44 就是每个图片的y坐标 原图        <!DOCTYPE html> &l...
css实现五彩导航栏
m0_74355247的博客
07-25 542
【代码】css实现五彩导航栏。
图的遍历---JavaScript
小羊的博客
06-29 863
两种算法可以对图进行遍历：广度优先 搜索（Breadth-First Search，BFS）和深度优先搜索（Depth-First Search，DFS）。图遍历可以用来 寻找特定的顶点或寻找两个顶点之间的路径，检查图是否连通，检查图是否含有环等。 首先需要了解一下图的遍历思想：图的遍历思想是必须追踪每一个访问的节点，并且追踪哪些节点还没有被完全探索，对于两种图的遍历算法，都需要明确指出第一个被...
移动端循环精灵图背景做法
ccssr的博客
07-09 409
这种布局方式是移动端经常出现的一种布局，对于他的做法，你是否还有疑惑不知从何下手呢？ 1、ul里面套li，使用浮动或者flex布局，flex布局注意换行问题（本次使用flex布局） 2、li里面分为图像和文字两部分，分别是pic/text 1、内容撑起来宽度，里面也可以用flex布局，记得改换主轴方向，但是注意pic/text之间需要一个高度 2、pic里面的图像位置注意，是需要和JS交互的 1、精灵图排列有规律，0,44,88等
jS循环图片
satonglezhang的专栏
05-26 1223
  在中输入代码:= 0) {document.images.show.src = document.slideform.slide[current-1].value;document.slideform.slide.selectedIndex = --current;}else last();}function first() {current = 0;document.images.show.
五彩导航栏练习---CSS
花&败
02-05 707
素材： 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed..
el-image遍历加载图片
09-13
你可以通过使用 Vue.js 的 v-for 指令来遍历加载图片。 例如，假设你有一个图片数组，包含了你想要加载的图片的 URL，你可以这样使用 el-image 组件来遍历加载这些图片： ``` <el-image v-for="(image, index)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一夕ξ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值