为了账号安全,请及时绑定邮箱和手机立即绑定

下面这段代码就是我按照前面讲的写出来的,但是在引用升序的地方报错了,求解

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{padding: 0;margin: 0;}

div{

width: 200px;

height: 200px;

background: red;

border:10px solid black;

/*font-size:12px;*/

color: white;

filter:alpha(opacity:30);

opacity:0.3;}

</style>

<script>

window.onload=function(){

var div=document.getElementById('div1');

// div.onmouseover=function(){

//  move(this,'width',400,function(){

//  move(div,'height',400,function(){

//  move(div,'opacity',100);

//  });//这个地方的div改为this会报错

//  });

// }

// div.onmouseout=function(){

//  move(this,'opacity',30,function(){

//  move(div,'height',200,function(){

//  move(div,'width',200);

//  });

//  });

// }

div.onmouseover=function(){

move(this,{width:400px,height:400px});

}

}


var alpha=30;

function move(obj,json,fn){


clearInterval(obj.timer);

obj.timer=setInterval(function(){

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)/8;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(icur==json[attr]){

clearInterval(obj.timer);

if(fn){

fn();

}

}

else{

if(attr=='opacity'){

obj.style.filter='alpha(opacity:'+(icur+speed)+')';

obj.style.opacity=(icur+speed)/100;

}else{

obj.style[attr]=icur+speed+'px';

}

}

}

},50);

}

function getstyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

}

</script>

</head>

<body>

<div id="div1" ></div>

</body>

</html>


正在回答

2 回答

首先对于楼主想要实现的功能不是太明白, 在本地测试了一下, 确实无法执行

先是没有定义json是什么, 分析代码理解楼主想要通过一个对象来进行链式动画操作, 但是你将for循环写在动画框架里, 是要将所有的动画是一时间执行么? 如果是这样的话, 执行的结果就是任意动画执行完成后, 定时器就会停止

所以从思路上来说, 你要修改的地方不是动画框架内部, 而是执行框架的方式

0 回复 有任何疑惑可以回复我~
#1

qq_苏慕遮_24019744 提问者

这是按照老师讲的进行同时操作
2016-10-14 回复 有任何疑惑可以回复我~
#2

qq_苏慕遮_24019744 提问者

我好像问错地方了。。。。
2016-10-14 回复 有任何疑惑可以回复我~
#3

Ken2016 回复 qq_苏慕遮_24019744 提问者

如果是同时操作的话, 每个定时器都要分开, 不能共用一个定时器
2016-10-14 回复 有任何疑惑可以回复我~
#4

Ken2016 回复 qq_苏慕遮_24019744 提问者

var json = { 'width': 400, 'height': 400, 'opacity': 100 }; div.onmouseover=function(){ move(this,json); }
2016-10-14 回复 有任何疑惑可以回复我~
#5

Ken2016 回复 qq_苏慕遮_24019744 提问者

最主要的是你在写入对象的时间代入了px, 那里只需要数值就可以了
2016-10-14 回复 有任何疑惑可以回复我~
#6

qq_苏慕遮_24019744 提问者 回复 Ken2016

我的天老爷,。。。。。。
2016-10-14 回复 有任何疑惑可以回复我~
查看3条回复

var div=document.getElementById('div1');

// div.onmouseover=function(){

//  move(this,'width',400,function(){

//  move(div,'height',400,function(){

//  move(div,'opacity',100);

//  });//这个地方的div改为this会报错

这个本来就应该用div,因为就是给div这个对象添加时间,不是this

0 回复 有任何疑惑可以回复我~
#1

qq_苏慕遮_24019744 提问者

大哥,这个不是重点啊
2016-10-14 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

下面这段代码就是我按照前面讲的写出来的,但是在引用升序的地方报错了,求解

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信