html元素放大缩小的示例-javaScript示例
2011-09-20 16:37:15
446
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="width:303px; height:202px; background:#ccc; position:relative; margin:0 auto; margin:200px" id="outer">
<div style="position:absolute; top:0px; left:0; background:green;width:100px; height:100px;"></div>
<div style="position:absolute; top:0px; left:101px; background:blue;width:100px; height:100px;"></div>
<div style="position:absolute; top:0px; left:202px; background:red;width:100px; height:100px;"></div>
<div style="position:absolute; top:101px; left:0; background:green;width:100px; height:100px;"></div>
<div style="position:absolute; top:101px; left:101px; background:yellow;width:100px; height:100px;"></div>
<div style="position:absolute; top:101px; left:202px; background:green;width:100px; height:100px;"></div>
</div>
if(!arguments[0]){//如果没有参数传进来，则让ojb等于当前的这个元素
//主要是为IE浏览做的一个判断
obj=this}
else{
if(arguments[0].clientX){
//如果传进来的参数是一个事件,说明也没有参数被传进来，主要是判断标浏览器
obj=this
}
}
对以上代码的解释如下：
一.obj表示被控制的那个对象
二.IE中，如果不传参数，则参数为undefied（false),这时候呢需要让obj等于this;
if(!arguments[0]){//如果没有参数传进来，则让ojb等于当前的这个元素
//主要是为IE浏览做的一个判断
obj=this}
三.在标准中，如果不传参数，默认有一个参数，是事件对象（event）,还要判断如果是事件对象，则也是没有传进参数来：if(arguments[0].clientX||!arguments[0]){
//如果传进来的参数是一个事件,说明也没有参数被传进来，主要是判断标浏览器
obj=this
}
当然这段代码可以为要，如果要这个代码，是为了这样绑定方法：oDivs[i].onmouseover= zoomBig ;此HTML文件中的第108行
</body>
</html>
<script type="text/javascript">
var timer=null;
function zoomBig(obj){
window.clearTimeout(timer);
//var oDiv=document.getElementById('div1');
//var that=null;
if(!arguments[0]){//如果没有参数传进来，则让ojb等于当前的这个元素
//主要是为IE浏览做的一个判断
obj=this}
else{
if(arguments[0].clientX){
//如果传进来的参数是一个事件,说明也没有参数被传进来，主要是判断标浏览器
obj=this
}
}
window.clearTimeout(obj.timer)
if(obj.offsetWidth<200){
obj.style.width=obj.clientWidth+2+'px';
obj.style.height=obj.clientHeight+2+'px';
obj.style.top=obj.offsetTop-1+'px';
obj.style.left=obj.offsetLeft-1+'px';
obj.style.zIndex=100;
obj.timer=window.setTimeout(function(){zoomBig(obj);},10);
}
}
function zoomSmall(obj){//这个方法，可以传数也可以不传参数
//var oDiv=document.getElementById('div1');
if(!arguments[0]){//如果没有参数传进来，则让ojb等于当前的这个元素
//主要是为IE浏览做的一个判断
obj=this;
}else{
if(arguments[0].clientX){
//如果传进来的参数是一个事件,说明也没有参数被传进来，主要是判断标浏览器
obj=this
}
}
window.clearTimeout(obj.timer);
if(obj.offsetWidth>100){
obj.style.width=obj.clientWidth-2+'px';
obj.style.height=obj.clientHeight-2+'px';
obj.style.top=obj.offsetTop+1+'px';
obj.style.left=obj.offsetLeft+1+'px';
obj.style.zIndex=0
obj.timer=window.setTimeout(function(){zoomSmall(obj)},10);
}
}
var oDivs=document.getElementById('outer').getElementsByTagName('div');
for(var i=0;i<oDivs.length;i++){
/*
//定义的放大和缩小的方法，也可以这样来用，不传任何参数
oDivs[i].onmouseover= zoomBig ;
oDivs[i].onmouseout= zoomSmall;
*/
oDivs[i].onmouseover=function(){zoomBig(this)};
oDivs[i].onmouseout=function(){zoomSmall(this)}
}
</script>
