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 相关文章推荐
自动更新作用
Oct 08 Javascript
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
javascript的内存管理详解
Aug 07 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
层叠菜单的动态生成
2006/10/09 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP7新功能总结
2019/04/14 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
Python打印“菱形”星号代码方法
2018/02/05 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
浅析Django中关于session的使用
2019/12/30 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
体育教师自荐信范文
2013/12/16 职场文书
九年级化学教学反思
2014/01/28 职场文书
员工考核管理制度
2014/02/02 职场文书
学校师德师风整改措施
2014/10/27 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
红高粱观后感
2015/06/10 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery