JavaScript图片水波涟漪效果
|
admin
2024年9月11日 7:46
本文热度 263
|
这个效果真的太哇塞了！
它是用jQuery实现的，下面是此插件的github地址
https://github.com/jtiscione/ripple
只需要下载这两个js文件，然后在html文件中引入，按照给的demo调用即可实现效果，下面是一个demo源码，代码很少。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Jquery水波涟漪</title>
<!-- 引入jquery和涟漪js文件 -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.ripple.js"></script>
</head>
<body>
<!-- 图片 -->
<img id="target"
src="https://img2.baidu.com/it/u=3595380293,1349487589&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666">
<script>
$(function() {
$("#target").ripple();
});
</script>
</body>
</html>
该文章在 2024/9/13 8:43:22 编辑过
400 186 1886
