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的tab切换效果代码[代码分离]
Apr 11 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 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时间不正确的解决方法
2008/04/09 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
express启用https使用小记
2019/05/21 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
Skyscanner波兰:廉价航班
2017/11/07 全球购物
《去年的树》教学反思
2014/04/11 职场文书
植物生产学专业求职信
2014/08/08 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
世界十大狙击步枪排行榜
2022/03/20 杂记