基于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 相关文章推荐
Javascript 写的简单进度条控件
Jan 22 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
js的touch事件的实际引用
Oct 13 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
原生javascript中this几种常见用法总结
Feb 24 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
一个好用的分页函数
2006/11/16 PHP
PHP关联链接常用代码
2012/11/05 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Python线程创建和终止实例代码
2018/01/20 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
有个性的自我评价范文
2013/11/15 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
新员工入职感言范文!
2019/07/04 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python