Bug为什么width不能到达鼠标事件所设置的值？
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(){
MoveModelFn(this,{"opacity":100,"width":600});
}
box2.onmouseout=function(){
MoveModelFn(this,{"opacity":30,"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
console.log(obj.style.filter);
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)
} 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;
}<!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>
甫里浏览 1340回答 1
1回答
-
不知名的前端程序猴
JS 51行 var speed=(json[attr]-icur)/10; 你的变化速度是除以10，那么当json[attr]-icur的值小于10的时候，结果是0，所以当还有几个像素的时候就不动了。具体怎么调就看你了。
随时随地看视频慕课网APP
相关分类
JavaScript