网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款轻量级的jQuery插件,触发点击时可以将涟漪特效应用到html中任何DOM元素上。
1. 在html页面中插入jquery库和插件文件。
<!-- jQuery -->
<script src="jquery.min.js"></script>
<!-- Waves.js plugin -->
<link rel="stylesheet" href="jquery-waves.css" />
<script src="jquery-waves.js"></script>
2. 将CSS类waves-effect或data-waves属性添加到要启用涟漪效果的元素中。
<button class="waves-effect">
Click/Tap Me
</button>
<button data-waves>
Click/Tap Me
</button>
3. 使用waves-color,data-waves-background-color属性自定义涟漪颜色:
<button data-waves data-waves-background-color="rgba(0, 0, 0, 0.35)">
Click/Tap Me
</button>
<button class="waves-effect waves-light bg-black">
Light
</button>
<button class="waves-effect waves-red">
Red
</button>
<button class="waves-effect waves-yellow">
Yellow
</button>
<button class="waves-effect waves-orange">
Orange
</button>
<button class="waves-effect waves-purple">
Purple
</button>
<button class="waves-effect waves-green">
Green
</button>
<button class="waves-effect waves-teal">
Teal
</button>
4. 随机颜色:
<button data-waves data-waves-background-color="RANDOM">
Click/Tap Me
</button>
5. 自定义不透明度。
<button data-waves data-waves-background-color="black" data-waves-opacity="0.55">
Click/Tap Me
</button>
6. 自定义动画的持续时间(毫秒)。默认值:800。
<button data-waves data-waves-duration="500">
Click/Tap Me
</button>
7. 您还可以使用JavaScript将涟漪效果应用于元素:
$('#element').click(function () {
$(this).waveEffect(
50, // x position
80, // y position
'red', // background color
1, // opacity
2000, // duration
function () { } // onComplete callback
);
});
转载请注明来源:点击任意DOM元素添加涟漪波浪动画效果jquery插件
本文永久链接地址:https://www.moyouyouw.cn/code/830.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论