最近做项目需要为一个菜单更换图标，项目里面使用了一张大的背景图，上面有所有的图标，每个图标都是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> 
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
