如何用JavaScript实现类似百度新闻导航栏的动态效果？

本文共计800个文字，预计阅读时间需要4分钟。

本例展示了如何用JavaScript实现百度新闻导航栏的效果。以下是大致的代码框架，供您参考：

javascript// 假设已经有一个包含新闻选项的HTML结构// // 最新// 推荐// 娱乐// 体育//

// JavaScript代码document.addEventListener('DOMContentLoaded', function() { var navItems=document.querySelectorAll('#news-nav li a'); var currentActive=null;

navItems.forEach(function(item) { item.addEventListener('mouseover', function() { if (currentActive) { currentActive.classList.remove('active'); } this.classList.add('active'); currentActive=this; }); });});

这段代码首先监听文档加载完毕事件，然后获取所有新闻导航的链接元素。接着，为每个链接添加鼠标悬停事件，当鼠标悬停在某个链接上时，移除其他链接的active类，并为当前链接添加active类。这样，就可以实现导航栏的切换效果。

本文实例为大家分享了JS实现百度新闻导航栏效果的具体代码，供大家参考，具体内容如下

最近在学Web前端，用js简单实现了百度新闻导航栏的效果。当鼠标移动到某一选项上方时，会有一个红色背景块滑动到当前选项上。当点击某一选项后，固定的红色背景块位置会移动到当前选项，意为当前选项被选中。话不多说，代码如下

body部分

<div class="box"> <!--两个红色背景块--> <!--随鼠标移动的背景块--> <div id="move"></div> <!--鼠标点击后固定在某处的背景块--> <div id="fixed"></div> <a href="#">主页</a> <a href="#">国内</a> <a href="#">国际</a> <a href="#">军事</a> <a href="#">财经</a> <a href="#">娱乐</a> <a href="#">体育</a> <a href="#">互联网</a> <a href="#">科技</a> <a href="#">游戏</a> <a href="#">女人</a> <a href="#">汽车</a> <a href="#">房产</a> </div>

css部分

*{ margin: 0; padding: 0; } .box{ top:100px; width: 790px; height: 30px; font-size: 0; position: relative; margin: 0 auto; background-color: #01204f; } a{ display: inline-block; position: relative; width: 60px; height: 30px; line-height: 30px; color: white; font-size: 16px; text-decoration: none; text-align: center; transition: all 0.6s; } #move{ position: absolute; background-color: red; top: 0px; left: 0px; width: 60px; height: 30px; transition: all 0.6s; } #fixed{ position: absolute; background-color: red; top: 0px; left: 0px; width: 60px; height: 30px; }

js部分

window.onload = function () { let move = document.getElementById("move");//滑动的背景块 let fixed = document.getElementById("fixed");//固定在某处的背景块 let aList = document.getElementsByTagName("a");//a标签列表 let left = move.offsetLeft + "px";//滑动背景块的初始位置 //使所有a标签绑定移入、移出、单击事件 for (let i = 0; i < aList.length; i++) { aList[i].onmouseover = function () { // 鼠标移入某个a标签时，滑动背景块滑到当前a标签的位置 move.style.left = aList[i].offsetLeft + "px"; } aList[i].onmouseout = function () { // 鼠标移出a标签时，滑动背景块返回初始位置 move.style.left = left; } aList[i].onclick = function () { // 某个a标签被点击后，固定背景块移动到当前a标签的位置 fixed.style.left = aList[i].offsetLeft + "px"; // 将滑动背景块的初始位置更新为当前a标签的位置 left = aList[i].offsetLeft + "px"; } } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。