js实现导航跟随效果

本文实例为大家分享了js实现导航跟随效果展示的具体代码，供大家参考，具体内容如下

如何实现上面的效果，请看下面的步骤

第一步：用 css 调整样式 ，这里小编用的是弹性盒子实现导航的平均分配。（聪明的你可以尝试用其他的方式看看能不能实现）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');}
 

html代码如下：这里 a 标签中的 href 属性后面加上那句代码是为了在实现点击事件时不让他有其他事件发生

 
 
 首页 
 
电视剧
 
最新电影
 
新闻头条
 
八卦娱乐
 
军事热点
 

第二步：分析下如何获得   图片（cloud.gif）   距离最左边的  left  值

 第三步：实现鼠标移动，移除，和点击事件的效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。