js循环精灵图

js循环精灵图js循环精灵图循环精灵图可以不用在给每一个小块一一的修改位置。左侧是一大张背景图右侧是成品是预览图这个背景图的位置其实是有规律的,每两张之间间隔一个固定长度,这个固定长度刚好等于一个小图标的长度,我们使用的这个图间隔44px。 <scripttype=”text/javascript”> varlis=document.querySelectorAll…

大家好,又见面了,我是你们的朋友全栈君。

js循环精灵图

循环精灵图可以不用在给每一个小块一 一的修改位置。
主要原理是找到整张的背景图与li的下标的数学关系
左侧是一大张背景图 右侧是成品是预览图

在这里插入图片描述在这里插入图片描述

这个背景图的位置其实是有规律的,每两张之间间隔一个固定长度 为20px,小图标的长度为24px,我们就可以得出这个间隔44px。然后使用这个间隔移动这个大背景图的位置达到精灵图的效果。我们的每一个span中都会有一个 background-image 因此我们只需要关注 大背景图的纵坐标上的移动。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"> ul { 
 width: 216px; } li { 
 width: 70px; height: 70px; list-style: none; float: left; border: 1px solid black; text-align: center; } span { 
 background: url(./jingling.png) 0 0 no-repeat; display: inline-block; width: 24px; height: 24px; margin-top: 11px; } </style>
<script type="text/javascript"> window.onload = function() { 
 var spans = document.getElementsByTagName('span') //核心代码 for (var i = 0; i < spans.length; i++) { 
 var index = i * 44; spans[i].style.backgroundPosition = "0 -" + index + "px"; //这个值 是负的原因是我们的大背景图是向上移动的 } } </script>
</head>
<body>
<ul>
<li> <span></span> </li>
<li> <span></span> </li>
<li> <span></span> </li>
<li> <span></span> </li>
<li> <span></span> </li>
<li> <span></span> </li>
<li> <span></span> </li>
<li> <span></span> </li>
<li> <span></span> </li>
</ul>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142018.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • delphi xe5 安装 fastreport5「建议收藏」

    delphi xe5 安装 fastreport5「建议收藏」1、卸载fastreport42、删除fastreport4的librarypath3、安装fr5:打开recompile.exe,1、选择delphi版本 4、recompileallpackages ->compile,之后在fr5安装文件路径下会多出一个libD19文件夹4、添加fastreport5的librarypath为上一步的libD19文件夹另

  • Springboot的Mybatis拦截器实现[通俗易懂]

    Springboot的Mybatis拦截器实现[通俗易懂]MyBatis提供了一种插件(plugin)的功能,虽然叫做插件,其实就是拦截器功能MyBatis允许拦截的接口MyBatis允许你在已映射语句执行过程中的某一点进行拦截调用。默认情况下,MyBatis允许使用插件来拦截的方法调用包括:Executor(update,query,fl…

  • spring boot redis 缓存_redis本地缓存

    spring boot redis 缓存_redis本地缓存SpringBoot集成Redis缓存查询操作是应用中最常见的操作,如果每次查询都从MySQL中查询则会影响效率,通常需要引入缓存来实现查询性能的优化。缓存可以选择本地缓存,远程缓存或本地缓存结合远程缓存。本地缓存可以使用Guava或Caffeine提供的解决方案,而远程缓存则可以选择Redis这样的内存数据库。本文记录一下SpringBoot集成Redis做缓存的相关配置。1引入依赖引入相应Starter。<dependency><gr

  • MAC双系统如何切换_mac双系统怎么进入mac系统

    MAC双系统如何切换_mac双系统怎么进入mac系统Mac上面安装双系统是一个很常见的系统选择方案。双系统之间的切换对于使用Mac的用户都不会陌生,但是对于许多初次接触Mac系统的用户而言,也有很多并不知道如何切换双系统,以及如何设置默认进入的系统。虽然只是一个很小的技巧,但是对于新接触Mac系统的用户如果不了解这个的话,那么使用中会有一定的麻烦。双系统的切换以及设置系统默认启动也有几种方法。-w+I4g$u#H#T1K一、开机按Op…

  • spring classutils_beanpropertybindingresult

    spring classutils_beanpropertybindingresult一、简介:  BeanUtils提供对Java反射和自省API的包装。其主要目的是利用反射机制对JavaBean的属性进行处理。我们知道,一个JavaBean通常包含了大量的属性,很多情况下,对JavaBean的处理导致大量get/set代码堆积,增加了代码长度和阅读代码的难度。二、用法:  BeanUtils是这个包里比较常用的一个工具类,这里只介绍它的copyProperties(………

  • Qt QFile按行读写数据

    Qt QFile按行读写数据1.包含的头文件#include<QDebug>#include<QFile>2.读数据QFilefile(“inputFile.txt”);if(file.open(QIODevice::ReadOnly|QIODevice::Text)){while(!file.atEnd()){QByt…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号