用JavaScript做精灵图

精灵图可以不用在给每一个小块一 一的修改位置。主要原理是找到整张的背景图与li的下标的数学关系.



这是一大张背景图，这个背景图的位置其实是有规律的，每两张之间间隔一个固定长度，这个固定长度刚好等于一个小图标的长度，我们使用的这个图间隔44px。

CSS样式如下图所示



样式代码如下：

<style>

		*{

			margin: 0;

			padding: 0;

		}

		body{

			background-color: skyblue;

		}

		.conve{

			width: 290px;

			border:  1px solid #aaa;

			margin: 100px auto;

			overflow: hidden;

			background-color: #fff;

		}

		.conve ul{

			width: 292px;

			list-style: none;

		}

		.conve ul li{

			height: 67px;

			float: left;

			width: 72px;

			border: 1px  solid #aaa;

			margin: -1px 0 0 -1px;

		}

		.conve ul li a{

			display: block;

			width: 72px;

			height: 67px;

			font-size: 12px;

			color: #555;

			text-decoration: none;

			font-family: "微软雅黑";

			text-align: center;

		}

		.conve ul li a:hover{

			color: #f40;

		}

		.conve ul li a i{

			width: 24px;

			height: 24px;

			display: inline-block;

			font-style: normal;

			margin-top: 11px;

			background: url('img/1.jpg')no-repeat 0 0;

		}

		.conve ul li a span{

			width: 72px;

			display: block;

			padding-top: 8px;

		}

	</style>

</head>

<body>

	<div class="conve" id="con">

		<ul>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

			<li><a href="#"><i></i><span>吃饭</span></a></li>

		</ul>

		</div>

</body>

</html>

JavaScript部分如下所示：

<script type="text/javascript">

	var icons=document.getElementsByTagName("i");

	for (var i = 0; i < icons.length; i++) {

		icons[i].style.backgroundPosition = "0 -"+ i*44 + "px";

	}

</script>

其中：background-position属性设置背景图像的起始位置（第一个值代表横向坐标值 ，第二个值代表竖向坐标值）

用JavaScript做精灵图的更多相关文章

  1. 第9天：CSS精灵图

    今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到 ...

  2. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...

  3. 《javascript面向对象精要》读书笔记

    <javascript面向对象精要> 买这本书的原因主要是因为作者,Nicholas C. Zakas 牛X闪闪的js专家,读过js高程的应该都知道他,而这本书是他的最新力作,感觉也是js ...

  4. 03.JavaScript 面向对象精要--理解对象

    JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...

  5. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  6. 用javascript做别踩白块游戏1

    初学Javascript做的一个别踩白块小游戏,代码简陋,如下: <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --&g ...

  7. H5 40-CSS精灵图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Css - 精灵图

    Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代 ...

  9. javascript面向对象精要第三章对象整理精要

    什么是对象的数据属性?什么是对象的访问器属性?[put]方法是默认创建数据属性的,访 问器属性不包含值而是定义了一个单属性被读取时调用的函数(getter)和当一个属性被写入时 调用的函数(sette ...

随机推荐

  1. linux(centos8):kubeadm单机安装kubernetes（kubernetes 1.18.3）

    一,kubernetes安装的准备工作: 1,准备工作的各步骤请参见: https://www.cnblogs.com/architectforest/p/13141743.html   2,  ma ...

  2. linux mkfifo命令基本用法

    首先了解linux命令执行顺序 通常情况下,终端只能执行一条命令,然后按下回车,那么执行多条命令呢 顺序执行多条命令,可以用分号; cmd1;cmd2;cmd3 条件执行多条命令,使用&&am ...

  3. centos使用上一条命令的快捷键

    使用上一条的最后一个参数 有时需要连续多个命令操作一个路径很长的文件: cat /usr/share/doc/centos-release/GPL 下一个命令可能还要使用这个路径,即使有命令补全也会很 ...

  4. php7.1安装openssl扩展

    1,进入到PHP源码目录中的ext中的openssl目录 2,phpize 3,./configure --with-openssl --with-php-config=/usr/local/php/ ...

  5. JS删除微博

    昨天晚上找回了10年注册的微博,现在瞅瞅,转发过很多傻吊的微博,关注了一堆营销号,不忍直视,动手删吧!开玩笑的,怎么可能手动! 查看自己的所有微博,F12----->console,负责下面代码 ...

  6. ucore操作系统学习(四) ucore lab4内核线程管理

    1. ucore lab4介绍 什么是进程? 现代操作系统为了满足人们对于多道编程的需求,希望在计算机系统上能并发的同时运行多个程序,且彼此间互相不干扰.当一个程序受制于等待I/O完成等事件时,可以让 ...

  7. 云计算之路-出海记：蹭一张 aws 船票

    出海记开篇之后,在 aws 上搭建博客园海外站的出海计划今天开始迈出第一步 -- 注册一个 aws 海外区域账号. aws 现在针对新注册用户提供12个月免费套餐(正在园子里推广并提供了专属注册通道) ...

  8. NB-IoT应用分类与技术特点分析

      NB-Iot作为一种窄带物联网技术在各大行业脱颖而出,其应用涵盖多个领域.此文计讯小编将讲解NB-IoT的主要应用分类及相关特点.   一.NB-IoT是什么   NB-IoT是指窄带物联网(Na ...

  9. websocket报400错误

    解决方案看了下讨论区说的方案,问题出现在nginx的配置文件,需要修改nginx.conf文件.在linux终端中敲入vim /etc/nginx/nginx.conf,找到location这个位置, ...

  10. codeforces 1442 A. Extreme Subtraction（贪心，构造）

    传送门 样例(x): 8 15 16 17 19 27 36 29 33 结果(t1) 15 15 16 18 26 35 28 32 思路:我们可以把最左端和最右端当做两个水龙头,每个水龙头流量的上 ...