- 在线时间
- 1481 小时
- 专家
- 0
- UID
- 51676
- 注册时间
- 2003-6-4
- 帖子
- 1600
- 精华
- 1
- 积分
- 11572
- 离线
- 6 天
专长: 网页设计,Flash动画设计,Javascript编程
- 帖子
- 1600
- 体力
- 11357
- 威望
- 43
|
发表于 2008-1-17 15:29:39
|显示全部楼层
大封装:
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>
复制代码
提示:您可以先修改部分代码再运行
|
|