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;
}
6 回答
qq_青枣工作室_0
TA贡献446条经验 获得超754个赞
你的box2有两个属性opacity和width都在变化。而在width未达到800前，opacity就已经先达到了100值，进而判断到停止了，即flag为true， clearInterval(obj.timer);
你的speed值是整数，多个属性同时变化时，会出现比较大的误差，不能同时到达最终值。
添加回答
举报
0/150
提交
取消