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 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
javascript对象的创建和访问
Mar 08 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
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
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
Maps Javascript
2007/01/22 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
JS变量及其作用域
2017/03/29 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
AngularJs每天学习之总体介绍
2017/08/07 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
医生见习报告范文
2014/11/03 职场文书
2014年班级工作总结
2014/11/14 职场文书
九华山导游词
2015/02/03 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
离婚案件上诉状
2015/05/23 职场文书
《检阅》教学反思
2016/02/22 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android