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 相关文章推荐
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
深入浅析vue中cross-env的使用
Sep 12 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
php封装的page分页类完整实例
2016/10/18 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
Jquery事件的连接使用示例
2013/06/18 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
python 操作hive pyhs2方式
2019/12/21 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
优秀毕业生求职推荐信范文
2013/11/21 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
家具商场的活动方案
2014/08/16 职场文书
企业员工集体活动方案
2014/08/17 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python