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'});}
                       });
                     });
              });
  • 相关阅读:
    js 控制页面跳转的5种方法
    弹性盒
    js中变量声明有var和没有var的区别
    解决Cannot read property 'style' of null中样式问题
    JS中用for循环解决重复定义的问题
    博客第一天
    jQuery 无缝轮播
    随鼠标移动
    倒计时
    轮播图
  • 原文地址:https://www.cnblogs.com/yang0902/p/5720821.html
Copyright © 2011-2022 走看看