一款基于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

注：本文爱编程原创文章，转载请注明原文地址：/article/1211838.html