jquery 水波涟漪动画特效
相德宇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水波涟漪特效</title>
<!-- 引入jquery库 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 引入jquery.ripples库 -->
<script src="https://cdn.bootcss.com/jquery.ripples/0.5.3/jquery.ripples.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
color: #fff;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image: url('./images/壁纸.jpg');
background-size: cover;
background-position: 50% 0;
height: 100%;
text-align: center;
}
body:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
p {
text-align: left;
margin-top: 20px;
}
a {
color: #ff6800;
}
pre {
text-align: left;
margin-top: 20px;
}
.error {
display: none;
position: fixed;
bottom: 0;
left: 0;
background: #000;
color: #f00;
padding: 5px;
max-width: 50%;
}
.disable {
position: fixed;
bottom: 0;
right: 0;
max-width: 50%;
}
</style>
<body>
<main>
</main>
</body>
<script>
$(document).ready(function() {
try {
$('body').ripples({
resolution: 512,
dropRadius: 20, //px
perturbance: 0.04,
});
$('main').ripples({
resolution: 328,
dropRadius: 10, //px
perturbance: 0.04,
});
} catch (e) {
$('.error').show().text(e);
}
$('.disable').show().on('click', function() {
$('body, main').ripples('destroy');
$(this).hide();
});
// Automatic drops
setInterval(function() {
var $el = $('main');
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 20;
var strength = 0.04 + Math.random() * 0.04;
$el.ripples('drop', x, y, dropRadius, strength);
}, 800);
});
</script>
</html>
类似资料：