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

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

第一步：用钢性铸铁调整样式，这里小编用的是弹性盒子实现导航的平均分配。(聪明的你可以尝试用其他的方式看看能不能实现)css代码如下：

样式类型=' text/CSS ' * { padd :0；margin:0 } a {装潢：无；} html，正文{身高：100%；宽度：100%;背景：黑色；} ul { position:relative宽度宽度：990pxlist-style :无；背景：白色；display : flex flex-方向：行；证明内容：空间环绕；余量：50px汽车；边界半径：10像素；} ul li {相对位置：flex:1文本对齐：居中；} ul阿利{ font-size :18 pxcolor : # 333 pad :10 px 0；显示器：块；} .云{ position : absolute eleft :32 pxtop :0底部：0;余量：自动宽度：83 pxheight :42 pxbackground : URL(' images/cloud。gif ')；} /stylehtml代码如下：这里a标签中的超链接属性后面加上那句代码是为了在实现点击事件时不让他有其他事件发生

ul span class='cloud'/span阿利href=' JavaScript : viod(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '首页/a/Li lia href=' JavaScript : viod(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel='外部nofollow '电视剧/a/Li lia href=' JavaScript : viod(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '最新电影/a/Li lia href=' JavaScript : viod(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel='外部nofollow ' rel='外部nofollow '新闻头条/a/Li lia href=' JavaScript : viod(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '八卦娱乐/a/Li lia 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)距离最左边的左边的值

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

脚本类型='text/javascript' //获得类为云的标签，var pic=文档。getelementsbyclassname(' cloud ')[0]；//获得所有的里标签var LiLiST=文档。GetElementsBytagname(' Li ')；//定义向右的移动初始距离var liLeft=32//定义缓慢动画的初始值定义变量表头=32;//用于定义当鼠标点击时的初始位置var CurrentLeft=32 for(var I=0；iliList.lengthi ){ //鼠标放上事件莉莉斯特[我]。onmouseover=function(){ //获取目标距离liLeft=这个。offset left this.offsetWidth/2-pic.offsetWidth/2; }//鼠标移除事件莉莉斯特[我]。onmouseout=function(){ //当鼠标移除某个里的时候把目标距离改为初始状态liLeft=currentLeft} //鼠标点击事件莉莉斯特[我]。onclick=function(){ current ft=this。offset left this.offsetWidth/2-pic.offsetWidth/2; } }//定义缓慢动画setInterval(function(){ header=header(liLeft-header)/10；pic.style.left=标头“px”；},20);/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。