JS实现滑动导航效果


Posted in Javascript onJanuary 14, 2020

本文实例为大家分享了JS实现滑动导航效果的具体代码,供大家参考,具体内容如下

<!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>

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

JS实现滑动导航效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 #Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 #Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 #Javascript
JS window对象简单操作完整示例
Jan 14 #Javascript
让mocha支持ES6模块的方法实现
Jan 14 #Javascript
JavaScript遍历数组的方法代码实例
Jan 14 #Javascript
JavaScript回调函数callback用法解析
Jan 14 #Javascript
You might like
同时提取多条新闻中的文本一例
2006/10/09 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python uuid模块使用实例
2015/04/08 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python 编写简单网页服务器的实例
2018/06/01 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
会计人员岗位职责
2014/03/19 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
地方白酒代理协议书
2014/10/25 职场文书
党建工作汇报材料
2014/12/24 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
迎国庆主题班会
2015/08/17 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS