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编程起步(第七课)
Jan 10 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
vscode自定义vue模板的实现
Jan 27 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
php代码优化及php相关问题总结
2006/10/09 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
javascript 短路法代码精简
2009/08/20 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
判断网页编码的方法python版
2016/08/12 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
python读写文件write和flush的实现方式
2020/02/21 Python
深入理解Python 多线程
2020/06/16 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
类的核心特性有哪些
2014/01/01 面试题
敬老院活动总结
2014/04/28 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
入团申请书格式
2019/06/20 职场文书
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript