欢迎访问优讯网!
您当前的位置:首页 > 爱编程

JS实现滑动导航效果

时间:2020-01-15 08:43:25  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要为大家详细介绍了JS实现滑动导航效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0"
>
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  * {
   padding: 0;
   margin: 0;
  }
  ul {
   list-style-type: none;
   height: 42px;
   position: absolute;
  }
  img {
   vertical-align: middle;
  }
  li,
  a {
   cursor: pointer;
  }
  a {
   text-decoration: none;
   color: #000000;
   display: block;
  }
  li {
   width: 83px;
   height: 42px;
   /*background-color: pink;*/
   float: left;
   text-align: center;
   line-height: 42px;
  }
  .box {
   position: relative;
   width: 530px;
   height: 42px;
   border: 1px solid deepskyblue;
   margin: 100px auto;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
  }
  .box img#cloud {
   width: 83px;
   height: 42px;
   position: absolute;
   left: 0;
   top: 0;
  }
  .box img#xinhao {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
  }
 </style>
</head>
<body>
<div class="box" id="box">
 <img id="cloud" src="images/cloud.gif" alt="" />
 <ul id="ull">
  <li><a href="#">长沙校区</a></li>
  <li><a href="#">长沙校区</a></li>
  <li><a href="#">长沙校区</a></li>
  <li><a href="#">长沙校区</a></li>
  <li><a href="#">长沙校区</a></li>
  <li><a href="#">长沙校区</a></li>
 </ul>
 <img id="xinhao" src="images/rss.png" alt="" />
</div>
<script src="js/common.js"></script>
<script src="js/changespead.js"></script>
<script>
 //获取每一个li
 var list=my$('ull').children;
 console.log(list);
 //获取到筋斗云图片
 var im=my$('cloud');
 //获取图片的宽度
 var imgWidth=im.offsetWidth;
 console.log(imgWidth);
 for(var i=0;i<list.length;i++){
  //设置index值用来储存移动的距离
  list[i].setAttribute('index',i);
  //遍历所有li,每个li绑定三个时间指向同一个函数f1
  list[i].onmouseover=f1;
  list[i].onmouseout=f1;
  list[i].onclick=f1;
  //实现函数f1
  function f1(e){
   switch(e.type) {
    case 'mouseover':
     //获取当前li的index值
     index=this.getAttribute('index');
     //调用变速移动函数
     movecs(im,imgWidth*index);
     break;
    case 'click':
     index=this.getAttribute('index');
     //点击之后固定
     im.style.left=imgWidth*index+'px';
     //点击了其中一个li之后的操作,移开鼠标之后不会弹回去
     this.onmouseout=false;
     for(var k=0;k<list.length;k++){
      list[k].setAttribute('jndex',k);
 
      list[k].onmouseover=function(){
       jndex=this.getAttribute('jndex');
       movecs(im,imgWidth*jndex);
      };
      list[k].onmouseout=function(){
       movecs(im,imgWidth*index);
      };
     }
     break;
    case 'mouseout':
 
     index=0;
     movecs(im,imgWidth*index);
     break;
   }
  }
 }
 
 
 
 /*list[i].onmouseover=function(){
   index=this.getAttribute('index');
   console.log(index);
   movecs(im,imgWidth*index);
  };
  list[i].onmouseout=function(){
   index=0;
   // im.style.left='0px';
   movecs(im,imgWidth*index);
  };
 
  list[i].onclick=function(){
   index=this.getAttribute('index');
   im.style.left=imgWidth*index+'px';
   alert(index);
  };*/
</script>
</body>
</html>

最终效果如下:云彩跟随鼠标移动,点击固定

以上就是本文的全部内容,希望对大家的学习有所帮助

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/178464.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门