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

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

<!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 回答

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

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

举报

0/150
提交
取消

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

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