js实现导航跟随效果


Posted in Javascript onNovember 17, 2018

本文实例为大家分享了js实现导航跟随效果展示的具体代码,供大家参考,具体内容如下

js实现导航跟随效果                          

如何实现上面的效果,请看下面的步骤

第一步:用 css 调整样式 ,这里小编用的是弹性盒子实现导航的平均分配。(聪明的你可以尝试用其他的方式看看能不能实现)css代码如下:

<style type="text/css">
 *{padding:0;margin:0;}
 a{text-decoration:none;}
 html,body{height:100%;width:100%;background:black;}
 ul{position:relative;width:990px;list-style:none;background:white;display: flex;flex-direction:row;justify-content: space-around;margin:50px auto;border-radius:10px;}
 ul li{position: relative;flex:1;text-align:center;}
 ul li a{font-size:18px;color:#333;padding:10px 0;display: block;}
 .cloud{position:absolute;left:32px;top:0;bottom:0;margin:auto;width:83px;height:42px;background:url('images/cloud.gif');}
 </style>

html代码如下:这里 a 标签中的 href 属性后面加上那句代码是为了在实现点击事件时不让他有其他事件发生

<ul>
 <span class="cloud"></span>
 <li> <a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页 </a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >电视剧</a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最新电影</a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻头条</a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >八卦娱乐</a></li>
 <li><a href="javascript:viod(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >军事热点</a></li>
 </ul>

第二步:分析下如何获得   图片(cloud.gif)   距离最左边的  left  值

js实现导航跟随效果

 第三步:实现鼠标移动,移除,和点击事件的效果

<script type="text/javascript">
 //获得类为cloud的标签,
 var pic=document.getElementsByClassName('cloud')[0];
 //获得所有的 li 标签
 var liList=document.getElementsByTagName('li');
 //定义向右的移动初始距离
 var liLeft=32;
 //定义缓慢动画的初始值
 var header=32;
 //用于定义当鼠标点击时的初始位置
 var currentLeft=32;
 for(var i=0;i<liList.length;i++){
  //鼠标放上事件
  liList[i].onmouseover=function(){
  //获取目标距离
  liLeft = this.offsetLeft+this.offsetWidth/2-pic.offsetWidth/2;
  }
  //鼠标移除事件
  liList[i].onmouseout=function(){
  //当鼠标移除某个li的时候把目标距离改为初始状态
  liLeft=currentLeft;
  }
  //鼠标点击事件
  liList[i].onclick=function(){
  currentLeft=this.offsetLeft+this.offsetWidth/2-pic.offsetWidth/2;
  }
 
 }
 //定义缓慢动画
 setInterval(function(){
  header = header + (liLeft-header)/10;
  pic.style.left = header + 'px';
 },20);
 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
angular.js实现购物车功能
Oct 23 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
JavaScript实现新年倒计时效果
Nov 17 #Javascript
JS实现倒计时图文效果
Nov 17 #Javascript
javaScript实现游戏倒计时功能
Nov 17 #Javascript
Javascript实现时间倒计时功能
Nov 17 #Javascript
Javascript实现秒表倒计时功能
Nov 17 #Javascript
js实现简单模态框实例
Nov 16 #Javascript
js实现搜索栏效果
Nov 16 #Javascript
You might like
JSONP 跨域共享信息
2012/08/16 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python动态参数用法实例分析
2015/05/25 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
对numpy中轴与维度的理解
2018/04/18 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
Pytorch之Variable的用法
2019/12/31 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
大学生自我鉴定
2013/12/16 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
Go并发4种方法简明讲解
2022/04/06 Golang