基于jQuery实现鼠标点击导航菜单水波动画效果附

翱翔于点击之间的水波导航动画——基于jQuery的优雅实现

你是否曾经想过让你的网站导航菜单活起来，为用户带来一种全新的互动体验？今天，我将向你展示一个基于jQuery和CSS3的竖直导航栏特效，只需鼠标点击，即可触发水波动画效果。

让我们来看一下这款特效的html结构：

```html

```

接下来，让我们看一下如何通过jQuery实现水波动画效果。当您点击导航菜单的某个项目时，将会产生一个水波效果，从点击位置扩散开来。以下是核心代码：

```javascript

$(".nav ul li a").click(function (e) {

// 获取被点击的元素父级和其他相关元素

var parent = $(this).parent();

var ink = parent.find("k"); //查找是否存在水波元素，若不存在则创建

if (ink.length == 0) parent.prepend("");

//移除动画类，避免上一次动画影响本次动画

ink.removeClass("animate");

//设置水波大小，如果水波元素没有高度和宽度，则使用父元素的宽度或高度较大的值作为直径，创建一个覆盖整个元素的圆

var d = Math.max(parent.outerWidth(), parent.outerHeight());

ink.css({ height: d, width: d });

//获取点击坐标，并计算相对于父元素的位置，从中心控制水波的位置

var x = e.pageX - parent.offset().left - ink.width() / 2;

var y = e.pageY - parent.offset().top - ink.height() / 2;

//设置水波位置并添加动画类，产生水波动画效果

ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate");

});

```

这个特效将使你的导航菜单更加生动，为用户提供一种全新的体验。你可以根据自己的需求，适当地修改或增加代码，以满足你的设计目标。希望这个特效能为你的网站增添一抹亮色！

这个基于jQuery的水波动画导航菜单源码已经开放下载，欢迎感兴趣的朋友前来下载学习。让我们一起在网页设计中创造出更多有趣、生动的互动体验吧！