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>
1 回答
不知名的前端程序猴
TA贡献32条经验 获得超22个赞
JS 51行 var speed=(json[attr]-icur)/10;
你的变化速度是除以10，那么当json[attr]-icur的值小于10的时候，结果是0，所以当还有几个像素的时候就不动了。具体怎么调就看你了。
添加回答
举报
0/150
提交
取消