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

基于jQuery鼠标点击水波动画竖直导航代码。这是一款基于jQuery CSS3实现的带动画效果的竖直导航栏特效。效果图如下：

效果展示源码下载

超文本标记语言代码：

div class='nav' ul lia网站首页/a/li lia关于我们/a/li lia产品中心/a/li lia成功案例/a/li lia联系我们/a/li lia在线留言/a/li /ul /div脚本类型=' text/JAVAScript ' src=' http : js/jQuery。量滴js /脚本脚本类型=' text/JavaScript '/jQuery time var parent，ink，d，x，y；$('.阿利导航报)。点击（函数(e) { parent=$(this)).parent()；//创建。如果不存在，则为墨水元素(parent.find(' .墨迹')。长度==0)父级。前置(' span class=' ink '/span ')；ink=parent.find(' .墨迹');//如果快速双击，停止上一个动画墨水。移除类(“动画”)；//设置的大小。墨迹if(！ink.height()！墨水。width()){//使用父元素的宽度或高度（以直径较大者为准)做一个可以覆盖整个元素的圆d=Math.max(父。外套宽度()、父母。外套高度());ink.css({ height: d，width :d })；}//获取点击坐标//逻辑=相对于页面的点击坐标-父页面相对于页面的位置-自身高度/宽度的一半，使其从中心可控；x=e.pageX - parent.offset().左墨水。width()/2；y=e.pageY - parent.offset().顶级墨水。高度()/2；//设置位置并添加类。动画ink.css({ top: y 'px，left: x 'px' }).addClass("动画");})/脚本以上代码是本文的核心代码，比较简单，大家可以根据需求，适当的添加删除代码。