JS入门笔记九：循环精灵图案例

在开发中，精灵图往往是按照一定规律制作的，前端程序员往往可以借助其规律来快速制作相应的图标，提升开发效率。

操作步骤：
1.寻找精灵图的排布规律
2.按照规律改变背景位置

以淘宝为例

这是淘宝精灵图的一部分，通过测量可知每个小图片间的间隔为22px,且图片大小为2222，所有每个精灵图在x轴的坐标为0，在y轴的坐标为-44(i-1),如第一张精灵图的x为0，y为-44*（1-1）=0；由此规律，我们利用循环就可以将其全部制作。

JS入门笔记九：循环精灵图案例相关推荐

React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
js入门笔记整理（二）——操作符
上一篇:js入门笔记整理一元操作符递增递增分为前置递增和后置递增前置型--两个加号(++)放在前面 var num = 1;++num; 这个操作其实就是给num加1,上面的列子等效于: va ...
精灵图案例-拼出自己名字
精灵图案例-拼出自己名字 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
JS循环精灵图背景-遍历背景图片
利用for循环设置一组元素的精灵图背景如果用css做,需要每个小盒子都设置一遍,才能得到相应的图标分析: 1.首先精灵图图片排列是有规律的 2.核心:利用for循环,修改背景位置精灵图来源:卷皮 ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
Vue.js 入门：去哪儿网APP案例学习记录
推荐博客 Vue 2.5 开发去哪儿旅游网站项目记录项目源码 : https://gitee.com/doublesgzl/Travel 第六章项目实战 6-1 环境配置 (建议看下视频) 6 ...
Node.js入门笔记
第一步自然是安装了.我是用Webstorm这个ide,安装分2步: 1.安装nodejs,下载Windows下的安装版本号.注意是以msi为扩展名的,然后下一步.没啥好说的,下载地址例如以下: 32位 ...
Neo4J入门笔记[2]---Neo4J GDS 图数据科学库
Neo4J 提供了GDS的库,里面包括了很多算法.GDS的英语全称是Graph Data Science(图数据科学库),其句法流程如下: stream Returns the result of t ...

JS入门笔记九：循环精灵图案例

JS入门笔记九：循环精灵图案例相关推荐

最新文章

热门文章