                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

使用運(yùn)動(dòng)框架為什么實(shí)現(xiàn)不了borderWidth 的變化功能，請(qǐng)高手指點(diǎn)。代碼如下：

<!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>邊框運(yùn)動(dòng)</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'>邊框運(yùn)動(dòng)</div>
</body>
</html>