求大神帮忙看看为啥不能运行呢！！！！！！
风骚小王子
2016-11-09 12:18
<!DOCTY html>
<html>
<head>
<meta charset="UTF-8">
<title>任意属性/链式运动</title>
<style type="text/css">
body,div{
margin:0;
padding:0;}
#div1{
width:200px;
height:200px;
border:1px solid yellow;
background-color:blue;
}
#div2{
width:200px;
height:200px;
border:1px solid green;
background:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
//var tags=document.getElementsByTagName('div');
var mId=document.getElementById('div1');
/*for(var i=0;i<tags.length;i++){
tags[i].timer=null;
}*/
mId.onmouseover=function(){
startmove(this,'width',400);}
mId.onmouseout=function(){
startmove(this,'width',200);}
}
function getStyle(obj,attr){
var myStyle=null;
if(obj.currentStyle){
myStyle=obj.currentStyle[attr];
}else{
myStyle=getComputedStyle(obj,null)[attr];
}
//attr=='opacity'?myStyle=parseInt(parseFloat(myStyle)*100):myStyle=parseInt(myStyle);
return myStyle;
}
var speed=0;
function startmove(obj,attr,target){
window.clearInterval(obj.timer);
obj.timer=window.setInterval(function(){
var att=getStyle(obj,attr);
speed=parseInt((target-att))/20;
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
if(obj.att==obj.target){
window.clearInterval(obj.timer);
/*if(fn){fn()}
}
else{
if(attr=='opacity'){
obj.style.opacity=(att+speed)/100;
console.log(obj.style.opacity);
obj.style.filter='alpha:(opacity:'+att+speed+')';
}*/
}else{obj.style[attr]=att+speed+'px';}
},200);
}
</script>
</head>
<body>
<div id="div1" >
333
</div>
<div id="div2">
222
</div>
</body>
</html>
2回答
-
- 慕少7532173
- 2016-11-09 16:32:24
一下是基于题主的代码稍微修改的，可以运行。题主细心察看一下改动之处。 <!DOCTY html> <html> <head> <meta charset="UTF-8"> <title>任意属性/链式运动</title> <style type="text/css"> body,div{ margin:0; padding:0;} #div1{ width:200px; height:200px; border:1px solid yellow; background-color:blue; } #div2{ width:200px; height:200px; border:1px solid green; background:red; } </style> <script type="text/javascript"> window.onload=function(){ var mId=document.getElementById('div1'); //console.log(getStyle(mId,'width')); mId.onmouseover=function(){ startmove(this,'width',400);} mId.onmouseout=function(){ startmove(this,'width',200);} } function getStyle(obj,attr){ var myStyle=null; if(obj.currentStyle){ myStyle=obj.currentStyle[attr]; }else{ myStyle=getComputedStyle(obj,null)[attr]; } return myStyle; } var speed=0; function startmove(obj,attr,target){ window.clearInterval(obj.timer); obj.timer=window.setInterval(function(){ var att=parseInt(getStyle(obj,attr)); speed=(target-att)/20; speed>0?speed=Math.ceil(speed):speed=Math.floor(speed); console.log(speed); if(att==target){ window.clearInterval(obj.timer); }else{obj.style[attr]=att+speed+'px';} },200); } </script> </head> <body> <div id="div1" > 333 </div> <div id="div2"> 222 </div> </body> </html> -
- 子不语怪力乱神
- 2016-11-09 13:27:39
0.0
JS动画效果
113931 学习 · 1443 问题
相似问题