最近做项目需要为一个菜单更换图标，项目里面使用了一张大的背景图，上面有所有的图标，每个图标都是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>
相关推荐
百分比的值是相对于边框背景图片而言的，例如边框图片的大小是300px*240px,我们取百分比为25% 30% 15% 20%，那么它们实际对应的效果就是剪切了图片的60px 90px 36px 60px的四边大小。上下乘高，左右乘宽。 用法和...
什么是CSS？ CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是一种标记语言，属于浏览器解释型语言，可以...background-clip(指定背景图片从什么位置开始裁切) background(为一个元素指定多个背景)
（2）背景图片（便于控制位置） 常用于logo 装饰性的小图片或者超大图片 background-image： none（默认） | url（图片地址/路径）; （3）背景平铺 background-repate: repate（默认） | no-repate | repate-x...
CSS3实现多种图片悬停提示效果源码集，一共有7种不同风格的悬停提示效果，当鼠标放在图片或指定的DIV区域时，滑动显示出文字提示效果。这些动画的提示效果主要是一些边框的变化和背景色填充的变化。
CSS3实现多种图片悬停提示效果源码集，一共有7种不同风格的悬停提示效果，当鼠标放在图片或指定的DIV区域时，滑动显示出文字提示效果。这些动画的提示效果主要是一些边框的变化和背景色填充的变化，兼容火狐和chrome...
直到背景图片碰到某个边缘位置 5.背景图片固定 作用：将普片固定在网页在某个位置，一直在可视区域内，不会随着 background-attachment: 取值： 1.scroll 默认值滚动 2.fixed 固定 6.背景图片定位 作用：...
首页采用div+js+css来实现四张港珠澳大桥背景图的引入和隔一定时间实现循环自动来回切换背景图，通过js设置切换间隔，每张图的停留时间。网站中央是内容，分别包含五大板块，每个版块由不同的div块组成，右上角是...
4.2.2 背景图片 4.2.3 背景定位 4.2.4 背景滚动 4.2.5 背景属性缩写 4.2.6 基于背景控制的导航优化 4.3 使用列表元素 4.3.1 ul无序列表 4.3.2 ol有序列表 4.3.3 改变项目符号样式 4.3.4 使用图片自定义项目符号 ...
给文本框添加背景其实很简单只要指定input的background-image样式即可，下面有个不错的示例代码，感兴趣的朋友可以参考下
关于background属性...background-size 指定背景图片的尺寸的大小 background-break 指定内联元素的背景图像进行平铺时的循环方式 background-clip 目前webkit引擎的safari和chrome浏览器支持，mozilla Gecko引擎
源码使用HTML、CSS、js结合实现，页面使用盒子模型弹性盒布局运用背景图片定位、设置元素层级、设置背景深色叠加伪元素、背景透明、元素缩放等样式属性；js方面使用原生js代码获取页面元素、首先设置新年时间（效果...
实例253 背景图片纵向重复显示 393 实例254 通过按钮变换背景颜色 395 实例255 背景自动变色 396 实例256 百叶窗 396 实例257 渐隐渐显的背景颜色 398 实例258 页面缩小 399 实例259 页面上下打开效果...
实例253 背景图片纵向重复显示 393 实例254 通过按钮变换背景颜色 395 实例255 背景自动变色 396 实例256 百叶窗 396 实例257 渐隐渐显的背景颜色 398 实例258 页面缩小 399 实例259 页面上下打开效果 400 实例260 ...
/* 设置背景图片 */ background-attachment: fixed; /* 背景固定不滚动 */ background-size: cover; /* 背景图片填满整个屏幕 */ background-position: center; /* 背景图片居中 */ } 居中外包围框 作用 居中内
这一点很重要，如果一个绝对定位的且带有文本的元素放在一个有文本的元素之上，那么将会十分的混乱，那么我们就可以通过设置背景图片或者背景颜色来进行遮盖，如果必须的话我们可以将其显示的设置为”transparent”...
jQuery攻略目录 图书信息 内容简介 作者简介 图书目录 编辑本段图书信息 书 名: jQuery攻略 作 ...324 10.27 设置背景图片 326 10.28 使背景图片在浏览器中央显示 327 10.29 保持背景图片固定 328 10.30 小结 330
7.14 滑动效果的背景图片 7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停...
/css/tree.css CSS样式表文件 /js/all.js JavaScript脚本文件 /images 图片文件 第24章（/ch24） 程序描述：本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时，自动保存...