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 相关文章推荐
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
React路由管理之React Router总结
May 10 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
Vuex 快速入门(简单易懂)
Sep 20 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php生成word并下载代码实例
2019/03/15 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
python动态加载包的方法小结
2016/04/18 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python 基于opencv操作摄像头
2020/12/24 Python
python 实现逻辑回归
2020/12/30 Python
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
小学数学教学随笔
2015/08/14 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL