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 相关文章推荐
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
js图片无缝滚动插件使用详解
May 26 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
详细分析React 表单与事件
Jul 08 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
session 的生命周期是多长
2006/10/09 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python文件和目录操作详解
2015/02/08 Python
Python开发的实用计算器完整实例
2017/05/10 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
Oracle性能调优原则
2012/05/03 面试题
国际贸易专业推荐信
2013/11/15 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
事业单位请假制度
2014/01/13 职场文书
生物制药专业求职信
2014/03/11 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
钱学森观后感
2015/06/04 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书