帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

点击任意DOM元素添加涟漪波浪动画效果jquery插件

帝国模板之家 2020-12-01 网页特效 评论

插件介绍

这是一款轻量级的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
  );
});
只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言