有个Bug一直都想不明白为什么？求大神~
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;
}
甫里浏览 2192回答 6
6回答
-
smartone
把speed=(json[attr]-icur)/6;,第67行的if(flag){}放在整个for in循环的外面.已试,可以了 -
淡淡的月饼
opacity和width中任意一个值达到了目标，就会停止运动。你把判断改成当所有的值都到达了，才停止运动就行啦 -
fengxxc
第55行,把var去掉;第67行的if(flag){}放在整个for in循环的外面. -
qq_青枣工作室_0
你的box2有两个属性opacity和width都在变化。而在width未达到800前，opacity就已经先达到了100值，进而判断到停止了，即flag为true， clearInterval(obj.timer);你的speed值是整数，多个属性同时变化时，会出现比较大的误差，不能同时到达最终值。 -
甫里
box1和box3都是可以正常的按照代码来运行
随时随地看视频慕课网APP
相关分类
JavaScript