已經(jīng)改成var that = this，還是觸發(fā)不了鏈?zhǔn)竭\(yùn)動(dòng)
//獲取對(duì)象屬性
function getStyle(obj,attr){
if (obj.currentStyle) {
//兼容IE瀏覽器
return obj.surrentStyle[attr];
}else{
//谷歌或火狐
return getComputedStyle(obj,false)[attr];
}
}
var timer = null;
function startMove(obj,attr,end,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//獲取當(dāng)前對(duì)象屬性值
var icur = 0;
//如果是透明度，則將結(jié)果四舍五入
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur = parseInt(getStyle(obj,attr));
}
//計(jì)算速度
var speed = (end-icur)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.icur == end){
clearInterval(obj.timer);
if (fn) {
fn();
}
}else{
if (attr == 'opacity') {
obj.style.filter = 'alpha:(opatity:'+icur+speed+')';//IE瀏覽器
obj.style.opacity = (icur+speed)/100;//谷歌或火狐
}else{
obj.style[attr] = icur+speed+'px';
}
}
},30)
}
<html>
<head>
<meta charset="utf-8">
<title>運(yùn)動(dòng)</title>
</head>
<script type="text/javascript" src="startMove.js"></script>
<style type="text/css">
*{
margin: 0;
padding:0;
}
#div1{
height: 200px;
width:200px;
position: relative;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var onDiv = document.getElementById('div1');
onDiv.onmouseover = function(){
var that = this;
startMove(that,'width',400,function(){
startMove(that,'height',400)
});
}
onDiv.onmouseout = function(){
startMove(onDiv,'width',200);
}
}
</script>
<body>
? ? <div id="div1">
? ? </div>
</body>
</html>
