最近做项目需要为一个菜单更换图标,项目里面使用了一张大的背景图,上面有所有的图标,每个图标都是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>