js实现导航跟随效果
时间:2018-11-17
这篇文章主要为大家详细介绍了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 值
第三步:实现鼠标移动,移除,和点击事件的效果
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JDK8 stream toMap() java.lang.IllegalStateException: Duplicate key异常解决(key重复)
- 如约而至,Java 10 正式发布!
- Intellij IDEA查看所有断点
- Spring Boot国际化支持
- 有记忆会推理的可微分神经计算机,DeepMind现在开源了代码
- Spring Boot整合Thymeleaf模板引擎
- Spring Boot实现热部署
- Java中的宏变量,宏替换详解。
- 类、变量、块、构造器、继承初始化顺序,终极解答。
- Spring Boot Debug调试
- Maven精选系列--classifier元素妙用
- PostgreSQL里面的一些命令小结
- Java中创建String的两道面试题及详解
- PostgreSQL主备环境搭建
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言教程,去除重复的蛋白质、基因互作关系
- Python自学成才之路 with到上下文管理器
- Python自动化运维之LVS
- Python自动化运维之Keepalived
- Python人工智能经典算法之机器学习第一篇
- Python人工智能经典算法之机器学习第二篇
- Python人工智能经典算法之机器学习第三篇
- Python人工智能经典算法之K-近邻算法
- Python人工智能经典算法之线性回归
- Python人工智能经典算法之逻辑回归
- Python人工智能经典算法之决策树
- Python人工智能经典算法之聚类算法
- 【NPM库】- 0x06 - WebSocket
- 代码详解——《无人驾驶车辆模型预测控制》3.3.3代码详解
- 【前端】:模块化 - 打包技术