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 offsetX与layerX区别
Mar 12 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
vue多次循环操作示例
Feb 08 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
JQuery animate动画应用示例
May 14 jQuery
ES6 Set结构的应用实例分析
Jun 26 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动态创建Web站点的方法
2011/08/14 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
使用Apache的rewrite
2021/03/09 Servers
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python批量图片处理简单示例
2019/08/06 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
庆中秋节主题活动方案
2014/02/03 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
建设工程授权委托书
2014/09/22 职场文书
2014年转正工作总结
2014/11/08 职场文书
骨干教师事迹材料
2014/12/17 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
总结python多进程multiprocessing的相关知识
2021/06/29 Python