本文介绍使用JavaScript实现类似百度新闻的导航栏交互效果。通过监听鼠标移入和点击事件，动态控制红色背景块的滑动与固定位置，展示前端基础交互逻辑与DOM操作技巧。
JavaScript实现百度新闻导航栏的滑动与选中效果
本文分享了一段JavaScript代码，用于实现百度新闻导航栏的交互效果，供读者参考学习。
在学习Web前端开发过程中，可以使用JavaScript简单复现百度新闻导航栏的交互行为。当鼠标悬停在某个选项上时，会出现一个红色背景块平滑滑动至该选项位置；当用户点击某个选项后，固定的红色背景块会移动并停留在此处，表示该选项已被选中。以下是具体实现代码。
HTML结构部分
HTML结构部分如下所示：
<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样式定义部分
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;
}JavaScript逻辑部分
JavaScript逻辑部分如下：
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";
}
}
}以上就是本文的全部内容，希望对读者有所帮助，欢迎继续支持本站。