- 资源介绍
一款简洁漂亮的基于jQuery+CSS3实现的带水波动画效果的竖直导航栏代码,鼠标点击导航菜单链接出现水波动画特效。
js代码
<script type="text/javascript" src="https://img.x22t.com/file/2020/04/25/6eaaee32446acaddb89fa300c79dc3bc7367.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>
猜你喜欢
-
jQuery鼠标经过滑动展开菜单代码
2017-04-04 -
仿MacOS苹果系统底部图标菜单动画代码
2017-06-12 -
jQuery旅游网站左侧分类导航菜单特效
2017-07-07 -
jQuery文件树形菜单插件proTree
2017-10-23 -
HTML5 Bootstrap响应式手机导航下拉菜单代码
2017-08-24 -
多级目录树型结构菜单js代码
2017-09-07 -
CSS3动画按钮导航菜单特效
2017-07-11 -
CSS3环形菜单切换动画特效
2017-04-08 -
css3下划线跟随文字导航菜单特效
2017-04-06 -
jQuery仿天猫商城滚动楼层导航特效
2017-06-05
-
jQuery折叠收缩展开下拉菜单代码
2017-06-03 -
jQuery+CSS3 3D立方体旋转图标菜单代码
2017-12-05 -
自适应左侧手风琴下拉菜单js代码
2018-03-31 -
jQuery+CSS3右下角图标菜单代码
2018-03-24 -
CSS3宽屏滑动下拉菜单导航特效
2017-04-01 -
jQuery带音效圆形网页右键菜单代码
2017-03-13 -
element-ui省市县三级联动菜单代码
2017-11-22 -
jQuery+CSS3全屏导航菜单代码
2017-08-07 -
css商城网站常用左侧分类下拉导航菜单代码
2017-09-23 -
HTML5手机右侧滑动导航下拉菜单代码
2018-04-27
猜你在找
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
源码资源库 » jQuery+CSS3点击水波动画竖直导航栏代码
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
源码资源库 » jQuery+CSS3点击水波动画竖直导航栏代码