<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水波纹特效演示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
body {
width: 100%%;
height: 100vh;
overflow: hidden;
background-color: #000;
background: url("./images/ocean.jpg");
background-size: cover;
background-position: center;
position: relative;
}
.info {
position: absolute;
top: 20px;
left: 20px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
z-index: 10;
}
/* jquery.ripples 插件的基础样式 */
.jquery-ripples {
position: relative;
z-index: 0;
}
.instruction {
position: absolute;
top: 20px;
left: 20px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
z-index: 10;
}
</style>
<!-- 引入本地 jQuery 库 -->
<script src="./js/jquery-3.6.0.min.js"></script>
<!-- 引入本地 jquery.ripples 插件 -->
<script src="./js/jquery.ripples.min.js"></script>
</head>
<body>
<div class="instruction">移动鼠标或点击屏幕查看水波纹效果</div>
<script>
$(document).ready(function() {
try {
// 水波纹效果
$('body').ripples({
resolution: 512, // 水波纹分辨率
dropRadius: 20, // 水滴半径
perturbance: 0.04, // 水波纹扰动强度
interactive: true, // 确保交互性开启
crossOrigin: '' // 处理跨域问题
});
// 点击时产生更大的水波纹
$(document).on('click', function(e) {
var $ripples = $('body');
var x = e.pageX - $ripples.offset().left;
var y = e.pageY - $ripples.offset().top;
$ripples.ripples('drop', x, y, 30, 0.05); // 更大的水滴和更强的扰动
});
// 添加错误处理
console.log("水波纹效果已初始化");
} catch (error) {
console.error("水波纹效果初始化失败:", error);
alert("水波纹效果初始化失败，可能是您的浏览器不支持WebGL。错误信息: " + error.message);
}
// 每3秒随机水波纹，增强视觉效果
setInterval(function() {
var $ripples = $('body');
var width = $ripples.width();
var height = $ripples.height();
var x = Math.random() * width;
var y = Math.random() * height;
$ripples.ripples('drop', x, y, 20, 0.03);
}, 3000);
});
</script>
</body>
</html>
本文最后更新时间 2025-06-01
文章链接地址：https://xzlo.blog/index.php/archives/38/
本站文章除注明[转载|引用|原文]出处外,均为本站原生内容,转载前请注明出处
用做测试
可以的
正是我所需要的
这个真不错啊
咿呀
这个案例不错，可以拿来用一下