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 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
js实现3D旋转相册
Aug 02 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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之Smarty入门
2007/01/04 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
js类型检查实现代码
2010/10/29 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python爬虫的工作原理
2017/03/05 Python
Python对List中的元素排序的方法
2018/04/01 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
解析Python3中的Import
2019/10/13 Python
详解python中eval函数的作用
2019/10/22 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
后进生转化工作制度
2014/01/17 职场文书
社区工作感言
2014/02/21 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript