基于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也能使用EXTJS视频演示
Dec 29 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
php实现等比例压缩图片
2018/07/26 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
简单的JS多重继承示例
2008/03/13 Javascript
IE与firefox之jquery用法区别
2008/10/03 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
matplotlib中legend位置调整解析
2017/12/19 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python 多个参数不为空校验方法
2019/02/14 Python
简单了解django文件下载方式
2020/02/10 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
四查四看剖析材料
2014/02/14 职场文书
班长竞选演讲稿
2014/04/24 职场文书
关于环保的建议书
2014/05/12 职场文书
党员承诺书范文
2014/05/19 职场文书
借名购房协议书范本
2014/10/06 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书