js动画（三）-白红宇

js动画（三）

阅读量：6234 次

发布时间：2019-06-22

本文共 2192 字，大约阅读时间需要 7 分钟。

咳咳咳咳，感冒了感冒了，鼻塞，蓝瘦啊！嘴巴也开裂，哎，心疼自己。想到这是第三只唇膏了！只怪，放荡不倔爱自由，

行驶在冷风路上么，北风那个吹啊吹啊吹啊，好了，发神经发完了，接下来进入正题，严肃脸。（字数150应该凑够了。）

js链式运动

代码如下：

                            
<style>
        
#lia { 
            
width: 200px;
            
height: 100px;
            
background: red;
            
opacity: 0.3;
        
}
    
</style>
    
<script>
        
window.onload = 
function
() { 
            
var
qwe = document.getElementById(
"lia"
);
            
qwe.timer = 
null
;
            
qwe.opacity=30;<br>                        
/*以下，就是控制代码*/
            
qwe.onmouseover = 
function
() { 
                
onStart(qwe,
"width"
,400,10,
function
(){ 
/*这里控制，宽，目标值，速度，以及下一个动画*/
                    
onStart(qwe,
"height"
,300,10,
function
(){ 
/*这里控制，长，目标值，速度，以及下一个动画*/
<br>                                               onStart(qwe,
"opacity"
,100,10);
/*这里控制，透明度，目标值，速度，以及下一个动画，当然以上顺序可以换*/
         
       

                            
}); <br>                                                    });<br>                         }<br><br>

                            
    
qwe.onmouseout = 
function
() { 
/*这里不解释，跟上面一样*/
        
onStart(qwe,
"opacity"
,30,-10,
function
(){ 
            
onStart(qwe,
"height"
,100,-10,
function
(){ 
                
onStart(qwe,
"width"
,200,-10);
            
});
        
});
    
}
    
}
function
getStyle(obj, attr) { 
/*obj对象，就是你要搞哪个元素，attr属性，你要搞哪个的属性*/
    
if
(obj.currentStyle) { 
        
return
obj.currentStyle[attr]; 
/*.currentStyle针对IE*/
    
} 
else
{ 
    
return
getComputedStyle(obj,
false
)[attr]; 
/* getComputedStyle针对firebox浏览器*/
}
}                
/*这个呢，是昨天的彩蛋，挺好用的，具体的功能就是，取对象的样式属性值，很好用*/
function
onStart(obj,attr, mu,speed,fn) { 
    
clearInterval(obj.timer);
    
obj.timer = setInterval(
function
() { 
        
if
(parseInt(getStyle(obj,
"width"
)) == mu)
        
{ 
            
if
(fn){ 
                
fn()   
/*这里就是，关键，就是执行下一个，函数的功能，我在这里创建一个空函数，                                                  具体函数内容交给主函数来写，所以这个函数，再多传一个参数，来判断，                                                  是否需要执行下一个函数*/
            
}
            
else
{ 
                
clearInterval(obj.timer);
            
}
        
}
        
else
if
(parseInt(getStyle(obj,
"height"
)) == mu)
        
{ 
            
if
(fn){ 
                
fn()
            
}
            
else
{ 
                
clearInterval(obj.timer);
            
}
        
}
        
else
if
(obj.opacity == mu){ 
                 
clearInterval(obj.timer);
                 
if
(fn){ 
                    
fn();
                 
}
            
}
        
else
{ 
            
if
(attr == 
"opacity"
){ 
                
obj.opacity+=speed;
                
obj.style.opacity = obj.opacity/100;
            
}
            
else
if
(attr == 
"width"
){ 
                
obj.style.width = parseInt(getStyle(obj,
"width"
))+speed+
"px"
;
            
}
            
else
if
(attr == 
"height"
){ 
                
obj.style.height = parseInt(getStyle(obj,
"height"
))+speed+
"px"
;
            
}                                
/*这里就是把三个功能给他合成在一个函数里，所以上述的fn(),执行的函数还是本身，只不过选择不同功能罢了                                                                    这里其实还可以优化，前面提到getStyle()，可以取到，对象的样式属性值，所以，可以把height和width整合起来。                                */
        
}
    
}, 30)
}
         
       

今天为什么把css的代码也放上来呢？

转载地址：http://ejqna.baihongyu.com/

你可能感兴趣的文章

Storm编程入门API系列之Storm的Topology默认Workers、默认executors和默认tasks数目