返回JS实现类似百......登陆

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

巴扎黑2017-01-14 14:53:50671

百叶窗下拉菜单效果非常棒,今天小编给大家分享一段js代码实现类似百叶窗下拉菜单效果,需要的朋友参考下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

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实现类似百叶窗下拉菜单效果请关注PHP中文网(www.php.cn)其他文章!

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送