本文实例为大家分享jquery实现百度新闻导航菜单滑动动画，供大家参考，具体内容如下
思路与步骤
1.利用UL创建简单横向导航；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿百度新闻菜单滑动动画</title>
<style type="text/css">
bo
在本实例中，我们将探讨如何使用jQuery来实现百度新闻导航菜单的滑动动画效果。我们通过HTML创建一个简单的横向导航菜单，使用`<ul>`和`<li>`元素来构建菜单项，并通过CSS来设定样式。接下来，我们将逐步解释实现这个动画效果的步骤。
1. **创建基础HTML结构**：
在提供的代码中，我们看到一个包含多个链接的无序列表（`<ul>`）。每个链接（`<a>`）代表一个菜单项。CSS样式被用来设置导航栏的外观，如字体大小、颜色、间距、容器宽度等。通过`<div>`元素创建了一个名为`div-nav-container`和`div-nav`的容器，用来容纳导航菜单，同时设置它们的背景色和位置。
2. **添加滑动动画层**：
为了实现滑动效果，我们需要创建一个新的`<div>`元素，类名为`div-hover`，并将其置于导航菜单下方。这个`div-hover`将作为动画的背景，当鼠标悬停在菜单项上时，它会根据当前选中的菜单项进行滑动。初始状态，`div-hover`的宽度为0，然后通过CSS动画来改变其宽度和位置。
3. **使用jQuery处理滑动事件**：
在JavaScript部分，我们使用jQuery来监听`mouseover`事件，当鼠标悬停在链接上时触发滑动动画。`SetDivHoverWidthAndLeft`函数用于获取当前链接的左侧位置和宽度，这些值将用于设置`div-hover`的动画属性。`$(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);`这段代码会停止当前的动画，然后用新的宽度和左侧位置开始动画，动画时间为150毫秒。
4. **辅助函数**：
`GetWidth`和`GetLeft`是两个辅助函数，分别用于获取当前链接元素的宽度和相对于父元素的左侧距离。这使得`div-hover`能够根据当前选中的菜单项进行精确的滑动。
5. **实现滑动效果**：
当用户将鼠标悬停在某个菜单项上时，`div-hover`的宽度和位置会根据相应的菜单项动态调整，从而创造出一种滑动的效果。动画时间（150毫秒）可以调整以达到所需的平滑度。
总结来说，这个实例主要展示了如何利用jQuery和CSS实现导航菜单的滑动动画效果，通过监听鼠标事件，计算元素位置和宽度，以及应用动画效果，可以创建出类似百度新闻导航栏的交互体验。这种技术在网页设计中非常常见，能够提升用户体验，使导航更加直观和吸引人。
