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


Posted in Javascript onJanuary 06, 2016

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

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

效果展示    源码下载

html代码:

<div class="nav">
  <ul>
   <li><a>网站首页</a></li>
   <li><a>关于我们</a></li>
   <li><a>产品中心</a></li>
   <li><a>成功案例</a></li>
   <li><a>联系我们</a></li>
   <li><a>在线留言</a></li>
  </ul>
 </div>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript">
  //jQuery time
  var parent, ink, d, x, y;
  $(".nav ul li a").click(function (e) {
   parent = $(this).parent();
   //create .ink element if it doesn't exist
   if (parent.find(".ink").length == 0)
    parent.prepend("<span class='ink'></span>");
   ink = parent.find(".ink");
   //incase of quick double clicks stop the previous animation
   ink.removeClass("animate");
   //set size of .ink
   if (!ink.height() && !ink.width()) {
    //use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
    d = Math.max(parent.outerWidth(), parent.outerHeight());
    ink.css({ height: d, width: d });
   }
   //get click coordinates
   //logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
   x = e.pageX - parent.offset().left - ink.width() / 2;
   y = e.pageY - parent.offset().top - ink.height() / 2;
   //set the position and add class .animate
   ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate");
  })
 </script>

以上代码是本文的核心代码,比较简单,大家可以根据需求,适当的添加删除代码。

Javascript 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
node.js require() 源码解读
Dec 13 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 #Javascript
谈谈JavaScript类型系统之Math
Jan 06 #Javascript
莱鸟介绍javascript onclick事件
Jan 06 #Javascript
莱鸟介绍window.print()方法
Jan 06 #Javascript
JavaScript实现点击按钮直接打印
Jan 06 #Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 #Javascript
JavaScript引用类型和基本类型详解
Jan 06 #Javascript
You might like
PHP安装问题
2006/10/09 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
layui的select联动实现代码
2019/09/28 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python入门篇之数字
2014/10/20 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python自动化报告的输出用例详解
2018/05/30 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
监理员的岗位职责
2013/11/13 职场文书
班队活动设计方案
2014/01/30 职场文书
自我评价的范文
2014/02/02 职场文书
劳资协议书范本
2014/04/23 职场文书
研究生求职自荐书
2014/06/23 职场文书
会计试用期自我评价
2014/09/19 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
单位介绍信格式范文
2015/05/04 职场文书
校运会宣传稿大全
2015/07/23 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang