zoukankan      html  css  js  c++  java
  • jquery 手风琴

    原生js:

    window.onload=function(){
                    var oBox=document.getElementById("box");
                    var aLi=oBox.getElementsByTagName('li');
                    var w=30;
                    for(var i=1;i<aLi.length;i++){
                        aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';
                    }
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].index=i;
                        aLi[i].onmouseover=function(){
                            for(var i=0;i<aLi.length;i++){
                                if(i<=this.index){
                                    move(aLi[i],{left:i*w},{time:500,easing:'ease-out'});
                                }else{move(aLi[i],{left:oBox.offsetWidth-(aLi.length-i)*w},{time:500,easing:'ease-out'});}
                            }
                        };
                    }
                };

    jquery:

    $(function(){
                   var w=30;
                   $('li').each(function(index,element){   //index指的是for循环的i,element指的是this
                        if(index>0){$('li')[index].style.left=$('#box')[0].offsetWidth-($('li').length-index)*w+'px';}
                   });  
                    $('li').each(function(index,element){
                       $('li').mouseover(function(){
                           if(index<=$(this).index()){   //小于等于当前移入的li下标
                               move($('li')[index],{left:index*w},{time:500,easing:'ease-out'});
                           }else{move($('li')[index],{left:$('#box')[0].offsetWidth-($('li').length-index)*w},{time:500,easing:'ease-out'});}
                       });
                     });
              });
  • 相关阅读:
    使用fiddler进行app弱网测试
    弱网测试
    Java虚拟机的内存模型
    Junit使用
    python安装numpy和scipy的资源
    HTTP资源合集
    http之post方法 提交数据的四种方法
    计算机编码中的换行 CR与LF
    python Mixin 是个啥?
    python mock的简单使用
  • 原文地址:https://www.cnblogs.com/yang0902/p/5720821.html
Copyright © 2011-2022 走看看