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 相关文章推荐
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
JS重载实现方法分析
Dec 16 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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/01/07 PHP
PHP安全防范技巧分享
2011/11/03 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
JavaScript While 循环基础教程
2007/04/05 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
在Python中实现贪婪排名算法的教程
2015/04/17 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Numpy中的mask的使用
2018/07/21 Python
使用python3构建文件传输的方法
2019/02/13 Python
详解python:time模块用法
2019/03/25 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
汇科协同Java笔试题
2012/03/31 面试题
影视制作岗位职责
2013/12/04 职场文书
银行求职信个人范文
2013/12/16 职场文书
2014年行政工作总结
2014/11/19 职场文书
班主任高考寄语
2015/02/26 职场文书
创业计划书详解
2019/07/19 职场文书
如何用python清洗文件中的数据
2021/06/18 Python