window.onload=Move;
function?getStyle(obj,attr){
if?(obj.currentStyle)?{
return?obj.currentStyle;
}else{
return?getComputedStyle(obj,false)[attr];
}
}
function?Move(){
var?box=document.getElementById("Box"),
box2=document.getElementById("Box2"),
box3=document.getElementById("Box3")
box.onmouseover=function(){
MoveModelFn(this,{"width":600});
}
box.onmouseout=function(){
MoveModelFn(this,{"width":400});
}
//同時運動
box2.onmouseover=function(){
var?_this=this;
MoveModelFn(_this,{"opacity":100,"width":800});//為什么最后到達不了width?800
}
box2.onmouseout=function(){
MoveModelFn(this,{"opacity":30,"width":400});//為什么也恢復到達不了width?400
}
box3.onmouseover=function(){
var?_this=this;
MoveModelFn(_this,{"height":300},function(){
MoveModelFn(_this,{'width':600})
});
}
box3.onmouseout=function(){
var?_this=this;
MoveModelFn(_this,{"height":200});
}
}
//function?MoveModelFn(obj,{attr:iTarget},fn)
function?MoveModelFn(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var?flag=true;
for(var?attr?in?json){
//獲取屬性值
var?icur=0;
if?(attr?==?'opacity')?{
icur?=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
//設置速度
var?speed=(json[attr]-icur)/10;
var?speed=speed>0?Math.ceil(speed):Math.floor(speed);
//?判斷停止
if(icur?!=?json[attr]){
flag=false;
}
if?(attr?==?'opacity')?{
obj.style.filter='alpha(opacity:'+(icur+speed)+')';//icur原始值+變化值speed
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+"px";
console.log(obj.style[attr]);
}
if(flag){
clearInterval(obj.timer);
//?回調函數
if(fn)?{
fn();
}
}
}
},30)
} <!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>MoveModel</title>
<link?rel="stylesheet"?type="text/css"?href="style/MoveModelCss.css">
</head>
<body>
<div?id="Box"></div>
<div?id="Box2"></div>
<div?id="Box3"></div>
<script?src="js/MoveModelJs.js"></script>
</body>
</html>body{
margin:?0;
padding:?0;
}
div{
height:?200px;
width:?400px;
background:?yellow;
border:2px?solid?green;
margin-bottom:?10px;
filter:?alpha(opacity:30);
opacity:?0.3;
}
有個Bug一直都想不明白為什么？求大神~
甫里
2016-04-18 22:30:53
