css sprite网页图片处理之小图标切换

最新推荐文章于 2022-05-10 18:30:52 发布

仰望星空的包子

最新推荐文章于 2022-05-10 18:30:52 发布

阅读量748

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/sinat_21206105/article/details/54313410

版权

JavaScript学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

css sprite以前我们经常用css sprite做小图标切换
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>copy css sprite</title>
	<style type="text/css">
	.dd{width:265px;margin:0 auto;}
		.dd li{list-style: none; height: 44px;line-height: 44px;background-color: #b51600;border-bottom: 1px solid #911001; border-top:1px solid #c11e08;}
		.dd li a{text-decoration: none;color:#fff; font-weight: bold;}	
		.dd li span{display: block;float:left;width: 24px;height: 40px; background-image: url(images/s-icon.png);}
		.dd li:hover{background-color: #fff;}
		.dd li:hover a{color:#b51600;}
	</style>
</head>
<body>
	<ul class="dd">
		<li><span></span><a href="">衣服栏目</a></li>
		<li><span></span><a href="">口红栏目</a></li>
		<li><span></span><a href="">包包栏目</a></li>
		<li><span></span><a href="">手机栏目</a></li>
		<li><span></span><a href="">椅子栏目</a></li>
		<li><span></span><a href="">椅子1栏目</a></li>
		<li><span></span><a href="">书籍栏目</a></li>
		<li><span></span><a href="">咖啡栏目</a></li>
		<li><span></span><a href="">戒指栏目</a></li>
		<li><span></span><a href="">礼物栏目</a></li>
		<li><span></span><a href="">汽车栏目</a></li>
	</ul>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var icon=$(".dd").find("span").height(),
				triggerLi=$(".dd").children("li");
			triggerLi.each(function(){
				var $this=$(this),
				$index=$this.index();
				$this.children("span").css("background-position","0 -"+icon*$index+'px')
				//$this.children("span").css("background-position","0 -"+ icon*$index +"px")

				$this.hover(
					function(){
						
						$this.children("span").css("background-position","-24px -"+icon*$index+'px')

					}
					,function(){
						$this.children("span").css("background-position","0 -"+icon*$index+'px')
					}
					)

			})
		})
	</script>
</body>
</html>