原生js实现循环精灵图

案例分析:1精灵图是竖着排列的

2.利用for循环，修改精灵图的背景位置 background-position

精灵图的y坐标索引号*间隔的距离

<script>var list = document.querselecterAll('li')for(var i = 0 ; i<list.length ; i++){//让索引号 × 图片距离的位置 就是每个精灵图的背景坐标var index = i * 44 list[i].style.backgroundPosition = '0 -' + index + 'px'}
</script>

分析首先精灵图的图片是有规律的

第一步：获取所有的li节点用querselecterAll()获取到的是一个伪数组

第二步：测量每个精灵图的间隔大小

第三步：修改样式list[i].style.backgroundPosition = 'x坐标 y坐标'

原生js实现循环精灵图相关推荐

JS基础-循环精灵图
要实现的效果如下图: 按照之前精灵图的做法,是采用一个一个li进行background-position的修改,但是有了JS之后就可以执行循环操作来更改图片的位置. 这里给出精灵图图片: 根据索引号来 ...
原生js循环展示dom_【前端面试】用一道题讲 js 的事件循环队列
昨天去面了滴滴,一口气面了三面,考了 promise 和事件循环.之前的猿辅导也考察了这些,几乎所有的大厂中厂都一定会考原生 js 的事件循环队列. 今天,我把昨天考察的原题拿出来分析一下. setT ...
分支结构||分支循环结构||使用原生js遍历对象
分支循环结构分支结构 v-show的原理:控制元素样式是否显示 display:none <!DOCTYPE html> <html lang="en"> ...
【温故知新】——原生js中常用的四种循环方式
一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输 ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
原生JS 将json数据循环遍历到HTML中
原生JS 将数组的数据循环遍历到HTML中 html如下(图片地址为本地保存的)<div id="article"><!-- <div class=&quo ...
原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
原生js循环展示dom_web前端教程：JS高阶编程技巧-惰性函数
框架(framework)是一个框子--指其约束性,也是一个架子--指其支撑性.是一个基本概念上的结构,用于去解决或者处理复杂的问题. Web前端教程框架这个广泛的定义使用的十分流行,尤其在软件概念 ...

原生js实现循环精灵图

原生js实现循环精灵图相关推荐

最新文章

热门文章