效果视频展示

话不多说直接上效果,从视频中可以很直观的看出长沙网站制作出的这个特效是什么样的.当鼠标在导航栏上选择栏目时,原本处于当前页栏目后面的橙色方块,会自动的移动至鼠标选择的栏目上.鼠标不断地切换栏目,橙色方块也会一直跟着变化,而当鼠标离开导航栏时,橙色方块则会自己回到最初始的位置.

这个特效非常实用,进入网站时第一时间就可以让客户看到,带来一种耳目一新的感觉,并且实现方式其实也很简单.

长沙网站建设通过Html代码制作出导航栏的基础框架,主要由栏目按钮和一个方块构成.再使用Css分别进行属性定义,为方块设置动画过渡属性和相对定位.

上图为页面基础代码,页面基础搭建好,接下里就可以开始使用JavaScript进行控制.

上图为完整JS代码.

在页面被加载完成后,橙色方块的初始位置在默认激活项(首页)下方.长沙网站开发为每个栏目都添加了鼠标移入mouseenter和移出的监听事件,当鼠标悬浮在上任意栏目上时,都会触发updateSlider函数,并通过其计算出方块将移动到的终点位置,并快速的移动到当前项下方.而当鼠标离开导航区域时,方块又会自动回到初始的位置.

核心代码:

function updateSlider(item) {
                const rect = item.getBoundingClientRect();
                const navRect = nav.getBoundingClientRect();
                slider.style.width = rect.width + 'px';
                slider.style.left = (rect.left - navRect.left) + 'px';
            }

通过获取整个容器和栏目按钮的属性,计算出滑块在栏目按钮内的相对位置,保证最终动画完整后的位置准确,也完美的呈现出了咱们想要的效果.

效果扩展方面,由于本次只是基础展示,只使用了最简单的方块作为跟随物.

在实际项目中,可以使用时可将其换成其他更美观的形状,或者直接换成图片也可以.另外调整Css的过渡属性,也可以控制它的运动速度和变化方式,实现不同的效果.

以上就是长沙网站制作整理的导航菜单栏目特效,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.