                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

如何下面代碼中div2的透明度和寬高同時變化？

<!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=utf-8" />
<title>任意屬性值2.1在之前基礎上加透明度</title>
<style>
body,div,span{
?? ??? ?margin:0;
?? ??? ?padding:0;
}
div{width:200px;
height:50px;
background-color:yellow;
margin:10px;
border:#000 solid 4px;
filter:alpha(opacity:30);
opacity:0.3;
}

</style>
<script>
window.onload=function(){
?? ?/*var oDiv=document.getElementsByTagName("div");
?? ?for( var i=0;i<oDiv.length;i++){
?? ??? ?oDiv[i].onmouseover=function(){
?? ??? ??? ?startMove(this,400);
?? ??? ??? ?}
?? ??? ?oDiv[i].onmouseout=function(){
?? ??? ??? ?startMove(this,200);
?? ??? ??? ?}
?? ??? ?}
?? ?var timer=null; */
?? ?var div1=document.getElementById("div1");
?? ?var div2=document.getElementById("div2");
?? ?div1.onmouseover=function(){
?? ??? ?startMove(this,'opacity',100);
?? ??? ?}
?? ?div1.onmouseout=function(){
?? ??? ?startMove(this,'opacity',30);
?? ??? ?}
?? ?div2.onmouseover=function(){
?? ??? ?startMove(this,'height',200);
?? ??? ?}
?? ??? ?
?? ?div2.onmouseout=function(){
?? ??? ?startMove(this,'height',50);
?? ??? ?}
?? ?function getStyle(obj,attr){
?? ??? ?if(obj.currentStyle){
?? ??? ??? ?return obj.currentStyle[attr];
?? ??? ??? ?}
?? ??? ?else{
?? ??? ??? ?return getComputedStyle(obj,false)[attr];
?? ??? ??? ?}
?? ??? ?}
?? ?function startMove(obj,attr,iTarget){
?? ??? ?clearInterval(obj.timer);
?? ??? ? obj.timer=setInterval(function(){
?? ??? ??? ? var icur=0;
?? ??? ??? ? if(attr=='opacity'){
?? ??? ??? ??? ? icur=Math.round(parseFloat(getStyle(obj,attr))*100);
?? ??? ??? ??? ? }
?? ??? ??? ? ?? ??? ?else{var icur=parseInt(getStyle(obj,attr));}
?? ??? ??? ? var speed=(iTarget-icur)/8;
?? ??? ??? ? speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ?if(icur==iTarget){
?? ??? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ??? ?if(attr=='opacity'){
?? ??? ??? ??? ??? ?obj.style.filter='alpha(opacity:'+(icur+speed)+')';
?? ??? ??? ??? ??? ?obj.style.opacity=(icur+speed)/100;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?else{obj.style[attr]=icur+speed+'px';}
?? ??? ??? ??? ?/*這里如果不用obj.style[attr]而是用obj.style.attr是不可以的因為attr定義的是'width'*/
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?30)}
}
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ?
</script>
</head>

<body>
<div id="div1"><span id="Draven">德萊文</span></div>
<div id="div2"><span id="Draven">金克斯</span></div>
<div id="div3"><span id="Draven">盧錫安</span></div>
</body>
</html>