使用运动框架为什么实现不了borderWidth 的变化功能,请高手指点。代码如下:

来源:9-18 浏览器窗口可视区域大小

慕虎5948952

2016-08-18 15:37

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>边框运动</title>
<style>
div{width:100px; height:100px; margin:20px; float:left; background:yellow; border:2px solid green;
    filter:alpha(opacity=30);  
      opacity:0.3;  
}
</style>
<script>
function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name]}else{
            return getComputedStyle(obj,false)[name];
            }    
    
    }
window.onload=function(){
    var aDiv1=document.getElementById('div1');    
 ;    
 var oTxt=document.getElementById('txt');
aDiv1.onmouseover=function(){
    startMove(this,'borderWidth',100);
    }
aDiv1.onmouseout=function(){
    startMove(this,'borderWidth',30);
    }
/*aDiv1.onmouseover=function(){    
    startMove(this,'width',400);
    }
aDiv1.onmouseout=function(){
    startMove(this,'width',100);
    }*/    

}    

function startMove(obj,attr,iTarget){
    
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
                var cur=parseInt(getStyle(obj,attr))
        if(attr=='opacity'){
            cur=parseFloat(getStyle(obj,attr))*100;
            }else{
                cur=parseInt(getStyle(obj,attr));
                
                }

        var speed=(iTarget-cur)/4;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);    
if(cur==iTarget){
    clearInterval(obj.timer);}
    else{
        if(attr=='opacity'){
        obj.style.filter='alpha(opacity:'+cur+speed+')';
        obj.style.opacity=(cur+speed)/100;    
        var oTxt=document.getElementById('txt');
        oTxt.value=    obj.style.opacity;
        
        
            }else{
    obj.style[attr]=cur+speed+'px';
    var oTxt=document.getElementById('txt');
    oTxt.value=    cur+speed;}
        }        
        },30)    
    }



</script>

</head>

<body>
<input id='txt' type="text" />
<div id='div1'>边框运动</div>
</body>
</html>

写回答 关注

1回答

  • qq_干脆就让我遍体鳞伤_03119878
    2016-08-18 16:59:30

    你这个好着呢啊,不要在慕课的页面里测试,自己去桌面新建文本测试

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468062 学习 · 21891 问题

查看课程

相似问题