求大神幫忙看看為啥不能運(yùn)行呢?。。。。?！
<!DOCTY html>
<html>
<head>
<meta charset="UTF-8">
<title>任意屬性/鏈?zhǔn)竭\(yùn)動(dòng)</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>
2016-11-09
一下是基于題主的代碼稍微修改的，可以運(yùn)行。題主細(xì)心察看一下改動(dòng)之處。 <!DOCTY?html> <html> <head> <meta?charset="UTF-8"> <title>任意屬性/鏈?zhǔn)竭\(yùn)動(dòng)</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
0.0