大封装:
setZoom(obj,x,y,tagName,className)
指定元素对象:
setZoom(document.getElementById("firstly"),1.25,1.25)
指定元素对象id:
setZoom("firstly",1.25,1.25)
指定标签名元素集合对象:
setZoom(document,1.25,1.25,"div") 或
指定包含指定样式名的元素集合:
setZoom(document,1.25,1.25,"*","zoom") 或
setZoom(document,1.25,1.25,"div","zoom")
复制内容到剪贴板
代码:
<script type="text/javascript">
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
function setZoom(obj,x,y,tagName,className){ // 设置执行缩放对象函数
/* 参数:
1、DOM元素对象或容器id,并根据是否设置了tagName参数来判断是否赋予该容器缩放
2、横向缩放倍数
3、纵向缩放倍数
4、标签名(若设定该参数,获取前设定DOM元素对象或指定ID容器包含的所有该标签元素子集,并根据是否设置了className参数来判断是否赋予这些元素缩放)
5、样式名(若设定该参数,获取前设定标签子集元素中包含该样式的元素集合,并赋予它们缩放)
*/
if(typeof(obj)!="object"){var obj=document.getElementById(obj);}
if(tagName){
if(obj.all && !window.opera){
if(tagName=="*"){
var tags=obj.all;
}else{
var tags=obj.all.tags(tagName);
}
}else{
var tags=obj.getElementsByTagName(tagName);
};
if(className){
for(var i=0;i<tags.length;i++){
if(RegExp("( ?|^)"+className+"\\b").test(tags[i].className)){
zoom(tags[i],x,y);
}
}
}else{
for(var i=0;i<tags.length;i++){
zoom(tags[i],x,y);
}
};
}else if(obj!=document){
zoom(obj,x,y);
}
}
function zoom(obj,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数
/*var obj=document.getElementById(id); // 获取元素对象*/
// 以下实际值计算全部忽略小数,遇小数统一向上或向下取值,避免各浏览器取值方式干扰
var dO=getDefaultStyle(obj,"overflow");
var dP0=getDefaultStyle(obj,"paddingTop"),dP0=parseInt(dP0),dP0Y=parseInt(dP0*y); // 获取元素各方向padding值、padding缩放值
var dP1=getDefaultStyle(obj,"paddingRight"),dP1=parseInt(dP1),dP1X=parseInt(dP1*x);
var dP2=getDefaultStyle(obj,"paddingBottom"),dP2=parseInt(dP2),dP2Y=parseInt(dP2*y);
var dP3=getDefaultStyle(obj,"paddingLeft"),dP3=parseInt(dP3),dP3X=parseInt(dP3*x);
var dW=obj.clientWidth-dP1-dP3,dWX=parseInt(dW*x); // 获取元素宽度、缩放宽度
var dH=obj.clientHeight-dP0-dP2,dHY=parseInt(dH*y); // 获取元素高度、缩放高度
var dMR=getDefaultStyle(obj,"marginRight");if(dMR=="auto")dMR=0;var pdMR=parseInt(dMR); // 获取元素margin-right数值
var dMB=getDefaultStyle(obj,"marginBottom");if(dMB=="auto")dMB=0;var pdMB=parseInt(dMB); // 获取元素margin-bottom数值
var dZ=getDefaultStyle(obj,"zIndex"); //获取元素z轴索引(依需求可选)
obj.onmouseover=function(){ // 鼠标移入
if((x<1 || y<1) && dO!="auto" && dO!="hidden")this.style.overflow="auto"; // 适应缩小效果(依需求或可设值为hidden)
this.style.position="relative"; // 设置相对定位,z轴索引向浏览者偏移
this.style.zIndex=dZ+1; // 再设置z轴优先(依需求可选)
this.style.marginRight=-(dWX-dW)-(dP1X-dP1)-(dP3X-dP3)+pdMR+"px"; // 根据容器横向缩放,设置反向margin-right补位
this.style.marginBottom=-(dHY-dH)-(dP0Y-dP0)-(dP2Y-dP2)+pdMB+"px"; // 根据容器纵向缩放,设置反向margin-bottom补位
this.style.padding=dP0Y+"px "+dP1X+"px "+dP2Y+"px "+dP3X+"px "; // 设置padding纵、横向缩放
this.style.width=dWX+"px"; // 设置横向缩放
this.style.height=dHY+"px"; // 设置纵向缩放
this.style.backgroundColor="#f00"; // 设置调试背景
}
obj.onmouseout=function(){
this.style.position="";
this.style.zIndex="";
this.style.marginRight="";
this.style.marginBottom="";
this.style.padding="";
this.style.width="";
this.style.height="";
this.style.backgroundColor="";
}
}
setZoom(document,1.5,1.5,"div","zoom");
</script>
提示:您可以先修改部分代码再运行