JS实现类似百叶窗下拉菜单效果

 更新时间:2016年12月30日 17:04:44   作者:Ag_wenbi  
百叶窗下拉菜单效果非常棒,今天小编给大家分享一段js代码实现类似百叶窗下拉菜单效果,需要的朋友参考下

废话不多说了,直接给大家贴代码了,具体代码如下所示:

function leftmove(){
  var oLeft_ul=document.getElementById('left_ul');
  var aLeft_li=oLeft_ul.children;//获得左侧ul下的第一个子集li
  var aleft_ul_hidden=oLeft_ul.getElementsByTagName('ul');
  var aleft_span_hidden=oLeft_ul.getElementsByTagName('span');
  var arr=[];
  var span_arr=[];
  getclassname(aleft_ul_hidden,'cl_hidden',arr)
  getclassname(aleft_span_hidden,'sj',span_arr);
  for(var i=0;i<aLeft_li.length;i++){
    aLeft_li[i].index=i;
    aLeft_li[i].onmouseenter=function(){
      for(var j=0;j<aLeft_li.length;j++){
        move(aLeft_li[j],{height:40});
        span_arr[j].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
        span_arr[j].style.top='13px';
        span_arr[j].style.left='8px';
      }
      var ul_height=arr[this.index].children.length*40
      move(aLeft_li[this.index],{height:40+ul_height});
      span_arr[this.index].style.borderColor='#666 #0ad #0ad #0ad';
      span_arr[this.index].style.top='17px';
      span_arr[this.index].style.left='6px';
    };
    aLeft_li[i].onmouseleave=function(){
      for(var j=0;j<aLeft_li.length;j++){
        move(aLeft_li[j],{height:40});
        span_arr[j].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
        span_arr[j].style.top='13px';
        span_arr[j].style.left='8px';
      }
    };
    arr[i].onmouseover=function(){
      for(var i=0;i<arr.length;i++){
        span_arr[i].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
        span_arr[i].style.top='13px';
        span_arr[i].style.left='8px';
      }
      span_arr[this.parentNode.index].style.borderColor='#666 #f2f2f2 #f2f2f2 #f2f2f2';
      span_arr[this.parentNode.index].style.top='17px';
      span_arr[this.parentNode.index].style.left='6px';
    };
    arr[i].onmouseout=function(){
      for(var i=0;i<arr.length;i++){
        span_arr[i].style.borderColor='#f2f2f2 #f2f2f2 #f2f2f2 #666';
        span_arr[i].style.top='13px';
        span_arr[i].style.left='8px';
      }
      span_arr[this.parentNode.index].style.borderColor='#666 #0ad #0ad #0ad';
      span_arr[this.parentNode.index].style.top='17px';
      span_arr[this.parentNode.index].style.left='6px';
    };
  }
}
leftmove();

相关文章

  • JS实现自动变化的导航菜单效果代码

    JS实现自动变化的导航菜单效果代码

    这篇文章主要介绍了JS实现自动变化的导航菜单效果代码,涉及JavaScript基于定时函数触发页面元素属性动态变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 微信小程序实现点击图片旋转180度并且弹出下拉列表

    微信小程序实现点击图片旋转180度并且弹出下拉列表

    这篇文章主要为大家详细介绍了微信小程序实现点击图片旋转180度并且弹出下拉列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JS实现进入页面时渐变背景色的方法

    JS实现进入页面时渐变背景色的方法

    这篇文章主要介绍了JS实现进入页面时渐变背景色的方法,涉及javascript操作css控制背景色渐变的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • layui-table获得当前行的上/下一行数据的例子

    layui-table获得当前行的上/下一行数据的例子

    今天小编就为大家分享一篇layui-table获得当前行的上/下一行数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS实现利用闭包判断Dom元素和滚动条的方向示例

    JS实现利用闭包判断Dom元素和滚动条的方向示例

    这篇文章主要介绍了JS实现利用闭包判断Dom元素和滚动条的方向,涉及javascript闭包、事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
    2019-08-08
  • 微信小程序按钮点击动画效果的实现

    微信小程序按钮点击动画效果的实现

    这篇文章主要介绍了微信小程序按钮点击动画效果的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 详解微信小程序工程化探索之webpack实战

    详解微信小程序工程化探索之webpack实战

    这篇文章主要介绍了详解微信小程序工程化探索之webpack实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • JavaScript两种计时器的实例讲解

    JavaScript两种计时器的实例讲解

    今天小编就为大家分享一篇关于JavaScript两种计时器的实例讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • uniapp使用百度地图的保姆式教学(适合初学者!)

    uniapp使用百度地图的保姆式教学(适合初学者!)

    公司项目中有地图展示和定位功能,所以下面这篇文章主要给大家介绍了关于uniapp使用百度地图的保姆式教学,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • 详解JavaScript对象的深浅复制

    详解JavaScript对象的深浅复制

    从层次上来看,对象的复制可以简单地分为浅复制和深复制,顾名思义,浅复制是指只复制一层对象的属性,不会复制对象中的对象的属性,对象的深复制会复制对象中层层嵌套的对象的属性。本文是我在复制对象方面的一些心得总结,由浅复制到深复制,感兴趣的朋友一起学习吧
    2017-03-03

最新评论