Mycat_
2016-08-07 17:42
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0}
div{width: 200px;height: 200px;background: #345;margin-bottom: 20px}
</style>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById('div1'),
div2=document.getElementById('div2');
div1.onmouseover=function(){
startMove(this,'width',400)
}
div1.onmouseover=function(){
startMove(this,'width',200)
}
div2.onmouseover=function(){
startMove(this,'height',400)
}
div2.onmouseover=function(){
startMove(this,'height',200)
}
}
function getClass(obj,attr){
if(obj.currenStyle){
return obj.currenStyle[attr]
}else{
return getComputedStyle(obj,false)[attr]
}
}
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var Attr=parseInt(getClass(obj,attr))
var speed=(iTarget-Attr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(Attr==iTarget){
clearInterval(obj.timer);
}else{
obj.style[attr]=Attr+speed+'px'
}
},30)
}
</script>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
</body>
</html>
onmouseout写成onmouseover了。
JS动画效果
113925 学习 · 1443 问题
相似问题