今天要为大家绍一款由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:;
}h1 {
padding: 50px 0;
margin: 0 50px;
font-size: 30px;
line-height: 30px;
font-weight:;
}p {
font-size: 14px;
font-weight:;
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:;
margin: 0 auto;
}.dot {
height: 2px;
width: 2px;
border-radius: 100%;
position: absolute;
z-index:;
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
