javascript关于循环精灵图的小案例

最新推荐文章于 2023-07-26 21:50:45 发布
最新推荐文章于 2023-07-26 21:50:45 发布
阅读量318 收藏 1
点赞数 1
分类专栏： js css HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45533907/article/details/107729906
版权

关于精灵图的那些小事，写的时候竟然认为精灵图直接可以从js生成，楼主你笑了吗？？emmm~~~
实在是没有找到合适的精灵图，就先不找图片了
CSS代码

 ul{
   
    	width: 375px;
        height: 361px;
    }
 ul li{
   
       	width: 100px;
        height: 100px;
   	    margin-left
最低0.47元/天 解锁文章
weixin_45533907
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
案例：1.利用循环实现精灵图布局 2.显示隐藏文本框内容
weixin_50119334的博客
10-02 348
分析：首先精灵图图片排列是由规律的 核心思路： 利用for循环，修改精灵图的背景位置 background-position 然后用软件测量，得到规律：让for循环里面的i的索引号*44就是每个图片的y坐标 <style> * { padding: 0px; margin: 0px; } li { list-style-type: none; } .box { ..
JavaScript案例-js轮播图
02-16
JavaScript案例-js轮播图
j2me精灵图和拼图技巧例子
04-20
紫色精灵，一款j2me变成的精灵游戏，图片大部分都是精灵图，编辑精灵图的技巧。
CSS精灵图(sprite)
wshwsh_的博客
07-26 2845
精灵图，也称雪碧图(sprite)，基本原理就是将页面中使用到的各种图片进行分类，整齐划一的摆在一张背景透明的图片上面，通过 CSS 的背景技术实现图片的引入，从而减少服务器发送和接收请求的次数，提高页面的加载速度。
js精灵图(for循环)：
weixin_48123820的博客
05-09 171
4.移动的距离就是这个目标图片的X和Y坐标，注意网页中的坐标有所不同。1.精灵技术主要针对背景图片使用，就是把多个小背景整合到一张大图中。3.移动背景位置，此时可以用background-position。6.图片默认显示的是左上角，这个使用我们要去位移它。2.这个大的图片我们称为sprites精灵图。向右是X轴、向下是Y轴。往上往左移动，所以是负值。5.因为一般情况下都是。
css简易的进度条
qq_45723045的博客
10-22 782
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
“CSS精灵图”详解 及 案例应用
hannah2233的博客
02-06 2119
一、 精灵图简介 1、 什么是精灵图？ 就是将几张较小的图片放在一张大图上，通过background-position调整位置进行显示 也可以叫做雪碧技术 也叫做css sprite 2.、 使用精灵图的好处 : 将多张较小的图片放在一张大图上，减少浏览器对服务器的请求，从而减轻服务器的压力。 3、 精灵图的使用 如果我们需要的一张图片在精灵图上，必须要了解这个图片的大小以及在精灵图上的位置 在页面上将这个图片显示出来，在显示的时候一定要注意我们容器的大小一定要和这个图标的大小一样 将精灵图设置
FOR循环精灵图
LiYeeMeng的博客
12-05 638
<script> // 获取元素 所有的小li querySelectorAll('li') var lis = document.querySelectorAll('li'); // for (var i = 0; i < lis.length; i++) { //让索引号乘以44 就是没个li的背景y坐标 index就是我...
JavaScript代码实现图片循环滚动效果
01-19
1.概述 ... function：要调用的JavaScript自定义函数名称。 b. Milliseconds：设置超时时间（以毫秒为单位）。 功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。 3.具体实现 （1
javascript下for循环用法小结
10-30
javascript下for循环用法小结
JavaScript学习笔记之图片库案例分析
12-04
一、一个javascript 图片库实例，下面是效果图 点击顶部导航，会在本页面进行刷新图片，然后，在底部会显示文本的变化 二、下面是代码 1、gallery.html代码 <!DOCTYPE html> <html> <head> <...
500套JavaScript小案例
05-11
500套JavaScript小案例，包含事件、特效、ajax、Dom操作等等，js学习必备。。。。。。。。。。。。。。
JS入门笔记九：循环精灵图案例
m0_52021758的博客
02-05 341
在开发中，精灵图往往是按照一定规律制作的，前端程序员往往可以借助其规律来快速制作相应的图标，提升开发效率。 操作步骤： 1.寻找精灵图的排布规律 2.按照规律改变背景位置 以淘宝为例 这是淘宝精灵图的一部分，通过测量可知每个小图片间的间隔为22px,且图片大小为2222，所有每个精灵图在x轴的坐标为0，在y轴的坐标为-44(i-1),如第一张精灵图的x为0，y为-44*（1-1）=0；由此规律，我们利用循环就可以将其全部制作。 ...
循环精灵图----小图标的展示
YuKing_HONG的博客
01-30 123
2.利用for循环修改精灵图的背景位置background-position。获取所有的li，形成数组，用数组的下标来计算图片的位置。1.精灵图最好有规律，每个图之间间隔相同。下面是精灵图，右键保存。4.字符用+号串起来。
精灵图使用——如何利用js循环实现精灵图设置
编程那些事
03-27 4518
首先对于以下这些图标的设置，应该如何实现呢？ 如果是还未学javascript时，我们一般会通过css样式一个个的给它们设置 background-position属性，这样会显得十分鸡肋！很麻烦！！！ 在学习完js后我们可以通过DOM操作循环实现精灵图设置 1. 一般我们可以将一些小图标集成在一起（让网页美工来完成），我们我们可以得到这样一张精灵图（png格式）。注意：精灵图图片的排列是...
js循环精灵图
qq_44983621的博客
08-23 4116
js循环精灵图 循环精灵图可以不用在给每一个小块一 一的修改位置。 左侧是一大张背景图 右侧是成品是预览图 这个背景图的位置其实是有规律的，每两张之间间隔一个固定长度，这个固定长度刚好等于一个小图标的长度，我们使用的这个图间隔44px。 <script type="text/javascript"> var lis = document.querySelectorAll...
JS循环精灵图背景
每天一个前端小知识~
08-21 1551
问题： 利用for循环设置一组元素的精灵图背景 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环精灵图</title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style-type: none;
阿里巴巴六个盒子实践.pptx
最新发布
06-08
阿里巴巴六个盒子实践.pptx
javascript循环结构的流程图
08-16
JavaScript 中常用的循环结构有三种：for 循环、while 循环和do-while 循环。下面是它们对应的流程图示例： 1. for 循环的流程图： ``` ┌─────────────┐ │ 初始化条件 │ └─────────...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值