JS手风琴特效、运动函数

手风琴效果并且附上刚写的运动函数

<style>
.accordion h5{
    float:left;
    margin:0 2px;
    width:50px;
    height:500px;
    cursor:pointer;
    background:#F0F;
    font:bold 24px Arial, Helvetica, sans-serif;
    text-align:center;
    color:#FFF;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    -o-border-radius:25px;
    border-radius:25px;
    -webkit-transition:0.3s ease-in-out;
    -moz-transition:0.3s ease-in-out;
    -o-transition:0.3s ease-in-out;
    -ms-transition:0.3s ease-in-out;
}
.accordion h5:hover,.accordion h5.now{
    background:#FC3;
    -webkit-transform:scale(1.02);
    -moz-transform:scale(1.02);
    -ms-transform:scale(1.02);
    -o-transform:scale(1.02);
}
.ac-silder{width:0px;height:500px;float:left;background:#f00;}
</style>
<div class="accordion" id="accordion">
  <h5>one</h5>
  <div class="ac-silder"></div>
  <h5>two</h5>
  <div class="ac-silder"></div>
  <h5>three</h5>
  <div class="ac-silder"></div>
  <h5>four</h5>
  <div class="ac-silder"></div>
</div>
<script src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/js/common.js"></script>
<script>
window.onload = function(){
    var oH5 = Y.getTagName("accordion","h5");    
    var oDiv = Y.getTagName("accordion","div");    
    var h5Len = oH5.length;
    for(var i=0;i<h5Len;i++){
        oH5[i].i = i;
        oH5[i].onmouseover = function(){
            Y.addClassName(this,"now");
            for(var j=0;j<h5Len;j++){
                if(this.i==j){
                    Y.startMove(oDiv[j],{width:200,display:"block"});
                }else{
                    Y.startMove(oDiv[j],{width:0,display:"none"});    
                }
            }
        }    
    }
}

Y.getStyle = function(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj, false)[attr];
    }
}

Y.startMove = function(obj, json, fn){
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true;        //这一次运动就结束了——所有的值都到达了
        for(var attr in json){
        //1.取当前的值
            var iCur=0;
        
            if(attr=='opacity'){
                iCur=parseInt(parseFloat(Y.getStyle(obj, attr))*100);
            }else{
                iCur=parseInt(Y.getStyle(obj, attr));
            }
        
        //2.算速度
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        
        //3.检测停止
            if(iCur!=json[attr]){
                bStop=false;
            }
        
            if(attr=='opacity'){
                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                obj.style.opacity=(iCur+iSpeed)/100;
            }else{
                obj.style[attr]=iCur+iSpeed+'px';
            }
        }
        if(bStop){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    }, 30);
}

</script>

转载于:https://www.cnblogs.com/starweb/archive/2012/06/09/2542777.html