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 concat数组累加 示例
Sep 03 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
javascript判断office版本示例
Apr 11 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
JavaScript实现拖拽功能
Feb 11 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/11/16 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python系列 文件操作的代码
2019/10/06 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
python GUI模拟实现计算器
2020/06/22 Python
Python读取yaml文件的详细教程
2020/07/21 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
单位门卫岗位职责
2013/12/20 职场文书
迎新晚会主持词
2014/03/24 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
力克胡哲观后感
2015/06/10 职场文书
运动会100米广播稿
2015/08/19 职场文书
Python常遇到的错误和异常
2021/11/02 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis