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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP 万年历实现代码
2012/10/18 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python logging日志模块原理及操作解析
2019/10/12 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
工厂门卫岗位职责
2013/11/25 职场文书
自荐书模板
2013/12/15 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
组工干部对照检查材料
2014/08/25 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
财务会计求职信范文
2015/03/20 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
高三教师工作总结2015
2015/07/21 职场文书
家访教师心得体会
2016/01/23 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python