css3背景图片指定显示位置

最新推荐文章于 2023-03-10 21:32:12 发布

jhhuang4836

最新推荐文章于 2023-03-10 21:32:12 发布

阅读量1k

点赞数

分类专栏： html jquery js 文章标签：前端 javascript 数据库 ViewUI

本文链接：https://blog.csdn.net/jhhuang4836/article/details/84806781

版权

js 同时被 3 个专栏收录

62 篇文章 0 订阅

订阅专栏

jquery

52 篇文章 0 订阅

订阅专栏

html

32 篇文章 0 订阅

订阅专栏

最近做项目需要为一个菜单更换图标，项目里面使用了一张大的背景图，上面有所有的图标，每个图标都是20*20的，利用只显示部分背景图来图标。这样可以循环div显示部分背景图片来选择对应的图标，实际上数据库存放的是图标所在背景图片上的坐标。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
	$().ready(function(){
		var width=$('img').width();
		var height=$('img').height();
		var w=0;
		var h=0;
		if(width%20==0){<!--如果正好是20的整数倍则就是整除的个数-->
			w=width/20;
		}else{          <!--否则整数个数+1-->
			w=Math.floor(width/20)+1;
		}
		if(height%20==0){
			h=height/20;
		}else{
			h=Math.floor(height/20)+1;
		}
		for(var i=0;i<h;i++){<!--循环生成背景图片的DIV-->
			for(var j=0;j<w;j++){
				$('#icon').append('<div style="background-image: url(\'tabicons.png\');background-position: -'+j*20+'px -'+i*20+'px;width: 16px;height: 16px;float: left;margin: 5px;"></div>');
			}
		}
	});
	
	function aa(){
		
	}
</script>
</head>
<body>
	<h2>原图</h2>
	<img src="tabicons.png">
	<h2>切割之后的图</h2>
	<hr/>
	<div id="icon">
		
	</div>
</body>
</html>