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


Posted in Javascript onDecember 30, 2016

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

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();
Javascript 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
vue router demo详解
Oct 13 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
原生js实现日历效果
Mar 02 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 #Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 #Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 #Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 #Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 #Javascript
jQuery中页面返回顶部的方法总结
Dec 30 #Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 #Javascript
You might like
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
浅谈php冒泡排序
2014/12/30 PHP
php商品对比功能代码分享
2015/09/24 PHP
语义化 H1 标签
2008/01/14 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
python遍历数组的方法小结
2015/04/30 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python操作MySQL数据库的方法
2018/06/20 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
党务公开方案
2014/05/06 职场文书
学校中秋节活动总结
2015/03/23 职场文书
上班迟到检讨书
2015/05/06 职场文书
经典爱情感言
2015/08/03 职场文书
英语导游欢迎词
2015/09/30 职场文书
python使用glob检索文件的操作
2021/05/20 Python
Go 中的空白标识符下划线
2022/03/25 Golang
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技