<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
float: left;
margin: 20px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2">哈哈</div>
</body>
<script type="text/javascript">
window.onload = function(){
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
//oBox1即是使用json方法 以对象方式给属性值
oBox1.onmouseover = function(){
changes(this,{height:200,width:200}); //var json={height:200,width:200};
}
oBox1.onmouseout = function(){
changes(this,{height:100,width:100});
}
oBox2.onmouseover = function(){
changes(this,'font-size',32);
}
oBox2.onmouseout = function(){
changes(this,'font-size',16);
}
/* 封装一个函数 获取内联样式的属性 (不能用offsetWidth 这类offset方法 有Bug的)*/
function getStyle(obj,name){
//判断IE系统中时候存在currentStyle这个方法
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
//不存在 即是非IE浏览器 就用以下方法获取
//不封装函数的写法 :getComputedStyle(oDiv,null).width;
//name是属性 调用函数时候 写法 getStyle(oDiv,'width'); 是字符串类型
return getComputedStyle(obj,null)[name];
}
}
var timer = null;
function changes(obj,json){
clearInterval(obj.timer);
//obj.timer 是给每个div都添加上这个timer定时器
obj.timer = setInterval(function(){
//目标值 减去 变化值 赋值 到 speed
//因为 getStyle函数获取到的样式是字符串 比如width是'100px'
//所以 需要用parseInt() 这个方法 强制将字符串转化为数字number类型
for(var name in json){
var speed = (json[name] - parseInt(getStyle(obj,name))) / 10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
obj.style[name] = parseInt(getStyle(obj,name)) + speed + 'px';
}
},30);
}
}
</script>