首页 > 代码库 > 一款基于jquery实现的鼠标单击出现水波特效
一款基于jquery实现的鼠标单击出现水波特效
今天要为大家绍一款由jquery实现的鼠标单击出现水波特效。用鼠标猛点击页面，你可以看到页面不断出面水波纹效果。然后水波纹渐渐消失。效果非常不错。我们一起看下效果图：
在线预览 源码下载
实现的代码。
html代码：
<div id="container"> <h1> Click or Touch the Screen.</h1> <p> Click as fast as you can. <em>Try it on a touchscreen - it‘s even more fun.</em></p></div>
css代码：
* { user-select: none; cursor: default;}body, html { height: 100%; font-family: helvetica neue,helvetica,arial,sans-serif;}h1, p { text-align: center; position: relative; z-index: 1;}h1 { padding: 50px 0; margin: 0 50px; font-size: 30px; line-height: 30px; font-weight: 200;}p { font-size: 14px; font-weight: 200; margin: 0 50px; color: #53646e;}p em { color: #42a6df;}#container { position: relative; height: 100%; width: 100%; overflow: hidden;}#container button { padding: 20px; border: none; background: transparent; display: block; position: relative; z-index: 3; margin: 0 auto;}.dot { height: 2px; width: 2px; border-radius: 100%; position: absolute; z-index: 0; animation: sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1); background: transparent;}@keyframes sploosh { 0% { box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7); background: rgba(66, 166, 223, 0.7); } 100% { box-shadow: 0 0 0 300px rgba(66, 166, 223, 0); background: rgba(66, 166, 223, 0); }}
js代码：
$(window).ready(function () { setTimeout(function () { setTimeout(function () { $(‘#container‘).append(‘<div class="dot" style="top:50%;left:50%;"></div>‘) }, 900); setTimeout(function () { $(‘#container‘).append(‘<div class="dot" style="top:50%;left:50%;"></div>‘) }, 600); setTimeout(function () { $(‘#container‘).append(‘<div class="dot" style="top:50%;left:50%;"></div>‘) }, 300); setTimeout(function () { $(‘#container‘).append(‘<div class="dot" style="top:50%;left:50%;"></div>‘) }, 0); setTimeout(function () { $(‘#container .dot‘).remove(); }, 2900); }, 1500); }); // click animation if (Modernizr.touch) { $(‘#container‘).on(‘touchstart‘, function (e) { var left = e.originalEvent.touches[0].pageX; var top = e.originalEvent.touches[0].pageY; $(this).append(‘<div class="dot" style="top:‘ + top + ‘px;left:‘ + left + ‘px;"></div>‘) setTimeout(function () { $(‘#container .dot:first-of-type‘).remove(); }, 3000); }); document.body.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }); } else { $(‘#container‘).on(‘mousedown‘, function (e) { var left = e.pageX; var top = e.pageY; $(this).append(‘<div class="dot" style="top:‘ + top + ‘px;left:‘ + left + ‘px;"></div>‘) setTimeout(function () { $(‘#container .dot:first-of-type‘).remove(); }, 3000); }); } //@ sourceURL=pen.js
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/6909
一款基于jquery实现的鼠标单击出现水波特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。