返回首页 设计案例 文章动态 组件列表
联系我们

扫一扫微信二维码

点击产生波浪效果的插件waves.js

新用户注册立送5积分哦...
插件描述:波浪效果,鼠标点击动画,点击产生波浪效果的插件waves.js,jquery,jquery插件

组件介绍:

waves.js使用方法

需要调用的两个文件waves.min.css,waves.min.js


<link rel="stylesheet" type="text/css" href="css/waves.min.css">

<script type="text/javascript" src="js/waves.min.js"></script>


给按钮添加点击动画

<style>

    #colored-button .btn { color: #fff; }

    #colored-button a, 

    #colored-button a:hover { background: #01BCFF; }

    #colored-button button,

    #colored-button button:hover { background: #1bb556; }

    #colored-button input,

    #colored-button input:hover { background: #ff4f0f; }

</style>

 

<p class="text-center">

    <a class="flat-buttons">Button A</a>

    <button class="flat-buttons">Button B</button>

    <input class="flat-buttons" type="submit" value="Button C">

</p>

 

<p id="colored-button" class="text-center">

    <a class="btn float-buttons">Button A</a>

    <button class="btn float-button-light">Button B</button>

    <input class="btn float-buttons" type="submit" value="Button C">

</p>

 

<script type="text/javascript">

    Waves.attach('.flat-buttons', ['waves-button']);

    Waves.attach('.float-buttons', ['waves-button', 'waves-float']);

    Waves.attach('.float-button-light', ['waves-button', 'waves-float', 'waves-light']);

</script>


给Icons添加点击动画

<style>

    #colored-icon i { color: #fff; }

    #colored-icon i:nth-child(1) { background: #ff6400; }

    #colored-icon i:nth-child(2) { background: #d54f38; }

    #colored-icon i:nth-child(3) { background: #eb4d7e; }

    #colored-icon i:nth-child(4) { background: #d138c8; }

    #colored-icon i:nth-child(5) { background: #bd73ff; }

    #colored-icon i:nth-child(6) { background: #0074d6; }

</style>

 

<p class="text-center">

    <i class="fa fa-bars flat-icon"></i>

    <i class="fa fa-bookmark flat-icon"></i>

    <i class="fa fa-calendar flat-icon"></i>

    <i class="fa fa-envelope flat-icon"></i>

    <i class="fa fa-exclamation flat-icon"></i>

    <i class="fa fa-folder flat-icon"></i>

</p>

 

<p id="colored-icon" class="text-center">

    <i class="fa fa-bars float-icon"></i>

    <i class="fa fa-bookmark float-icon-light"></i>

    <i class="fa fa-calendar float-icon"></i>

    <i class="fa fa-envelope float-icon-light"></i>

    <i class="fa fa-exclamation float-icon"></i>

    <i class="fa fa-folder float-icon-light"></i>

</p>

 

<script type="text/javascript">

    Waves.attach('.flat-icon', ['waves-circle']);

    Waves.attach('.float-icon', ['waves-circle', 'waves-float']);

    Waves.attach('.float-icon-light', ['waves-circle', 'waves-float', 'waves-light']);

</script>


给div或图片添加点击动画

<div class="boxes flat-box">Flat Box</div>

<div class="boxes float-box">Float Box</div>

<div class="clear"></div>

 

<p class="text-center">

    <img class="waves-image" src="imgae/tp.jpg">

</p>

 

<script type="text/javascript">

    Waves.attach('.flat-box', ['waves-block']);

    Waves.attach('.float-box', ['waves-block', 'waves-float']);

    Waves.attach('.waves-image');

</script>


如有侵权,请联系站主删除

项目讨论(0)

建站咨询

点我咨询

建站咨询热线

153-2135-3313

QQ,新浪是独立账号信息不互通

Q Q 登陆

我已阅读并接受 《注册声明》与《版权声明》

没有账号?立即注册

QQ,新浪是独立账号信息不互通

Q Q 注册

我已阅读并接受 《注册声明》与《版权声明》

已有账号?

注册声明

一、用户注册、登陆,视为接受本协议的约束。

二、用户承诺遵守国家的法律法规及部门规章

三、用户承诺遵守“313组件库”的知识产权政策.

四、站内插件用于行业交流、学习。

五、用户侵犯第三人的知识产权,由该用户承担全部法律责任。

版权声明

313组件库(www.yu313.cn)站内所有涉及插件及代码由会员或站主上传而来,313组件库不拥有会员上传的插件及代码的版权

313组件库作为网络服务提供者,对非法转载,盗版行为的发生不具备充分的监控能力。但是当版权拥有者提出侵权指控并出示充分的版权证明材料时,313组件库负有移除盗版和非法转载作品以及停止继续传播的义务。313组件库在满足前款条件下采取移除等相应措施后不为此向原发布人承担违约责任或其他法律责任,包括不承担因侵权指控不成立而给原发布人带来损害的赔偿责任。

如果版权拥有者发现自己作品被侵权,请及时向313组件库提出权利通知,并将姓名、电话、身份证明、权属证明、具体链接(URL)及详细侵权情况描述发往版权举报专用通道,313组件库在收到相关举报文件后,在3个工作日内移除相关涉嫌侵权的内容

QQ:515184405(周一到周五,9:30-18:00)

首页 案例 组件 我的