放大缩小容器：仿动画

最新推荐文章于 2025-08-04 16:06:11 发布

iteye_3224

最新推荐文章于 2025-08-04 16:06:11 发布

阅读量71

点赞数

分类专栏： html和css 文章标签： IE JavaScript CSS HTML ViewUI

html和css 专栏收录该内容

63 篇文章

订阅专栏

  <html> 
 <head> 
 <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
 <title>放大缩小容器：仿动画</title> 
 <styletype="text/css"> 
*{margin:0;padding:0;}
body{padding:1em;}
h2{font-size:2em;}
div{display:inline-block;width:10em;padding:.5em;margin-bottom:1em;overflow:hidden;background:#eee;text-align:center;font-size:1em;}
p#text{position:absolute;right:10px;top:10px;}
 </style> 
 </head> 
 <body> 
 <pid="text"></p> 
 <divid="box1"onmouseover="pr_box('box1',150);"onmouseout="pr_box('box1',100);"> 
 <h2>标题</h2> 
 <p>测试鼠标滑动效果</p> 
 </div> 
 <divid="box2"onmouseover="pr_box('box2',150);"onmouseout="pr_box('box2',100);"> 
 <h2>标题</h2> 
 <p>测试鼠标滑动效果</p> 
 </div> 
 <divid="box3"onmouseover="pr_box('box3',150);"onmouseout="pr_box('box3',100);"> 
 <h2>标题</h2> 
 <p>测试鼠标滑动效果</p> 
 </div> 
 <divid="box4"onmouseover="pr_box('box4',150);"onmouseout="pr_box('box4',100);"> 
 <h2>标题</h2> 
 <p>测试鼠标滑动效果</p> 
 </div> 
 </body> 
 <scripttype="text/javascript"> 
functiongetDefaultStyle(obj,attribute){//返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
returnobj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
functionpr_box(id,e){
clearInterval(document.getElementById(id).maxmin);
 varobj=document.getElementById(id); 
 varcfont=getDefaultStyle(obj,"fontSize");//得到默认的大小:附单位 
 varcp=cfont.replace(/[0-9]|[\.]/g,"");//得到默认的单位 
 varfsize=parseFloat(cfont);//得到默认的大小数值 
 vars=10;//运动速度 
if(!obj.fsizeTmpe){//存储默认大小数值
 obj.fsizeTmpe=fsize; 
}
if(!objfont){//如果没有设置当前大小，则赋予其默认大小
 obj.style.fontSize=cfont; 
}
 vare=obj.fsizeTmpe*e/100;//需要改变到的大小数值 
 varobjfont=parseFloat(obj.style.fontSize);//得到当前的大小 
 if(e<obj.fsizeTmpe){obj.maxmin=setInterval(function(){pr_min(obj,e,cp)},s);} 
 if(e>obj.fsizeTmpe){obj.maxmin=setInterval(function(){pr_max(obj,e,cp)},s);} 
 if(e==obj.fsizeTmpe){ 
 if(objfont<obj.fsizeTmpe){ 
 obj.maxmin=setInterval(function(){pr_max(obj,obj.fsizeTmpe,cp)},s); 
}
 if(objfont>obj.fsizeTmpe){ 
 obj.maxmin=setInterval(function(){pr_min(obj,obj.fsizeTmpe,cp)},s); 
}
}
}
functionpr_max(obj,e,cp){
if(!obj.fs){
 objobj.fs=obj.style.fontSize; 
}
 varobjfont=parseFloat(obj.fs); 
 if(e>objfont){ 
 //document.getElementById("text").innerHTML+="放大-原始值："+objfont+"+递增值："+e/10+"<br/>"; 
 obj.fs=objfont+e/10+cp; 
 objobj.style.fontSize=obj.fs; 
}
 elseif(e<objfont){ 
 obj.fs=e+cp; 
 objobj.style.fontSize=obj.fs; 
}
else{clearInterval(obj.maxmin);}
}
functionpr_min(obj,e,cp){
if(!obj.fs){
 objobj.fs=obj.style.fontSize; 
}
 varobjfont=parseFloat(obj.fs); 
 if(e<objfont){ 
 //document.getElementById("text").innerHTML+="缩小-原始值："+objfont+"-递减值："+e/10+"<br/>"; 
 obj.fs=objfont-e/10+cp; 
 objobj.style.fontSize=obj.fs; 
}
 elseif(e>objfont){ 
 obj.fs=e+cp; 
 objobj.style.fontSize=obj.fs; 
}
else{clearInterval(obj.maxmin);}
}
 </script> 
 </html> 