jQuery和CSS3炫酷图片和按钮点击波特效

图片效果 按钮 点击波 2015-03-22

控件介绍
rippler是一款效果非常炫酷的jQuery和CSS3图片和按钮点击波特效插件。点击波特效是指在按钮或图片上点击的时候,从点击的位置开始,会产生一种圆形光波向外辐射的炫酷效果。这款点击波特效同时支持桌面设备和移动触摸设备。
浏览器兼容

支持IE10+

演示下载 928
使用方法

相同的效果还有:jQuery和CSS3炫酷按钮点击波特效。

使用方法

与Bootstrap结合使用

该点击波特效可以完美的和Bootstrap 3结合,用于制作按钮和链接按钮的点击波特效:

bootstrap按钮点击波效果:

  rippler-default
bootstrap超链接按钮点击波效果:
  rippler-bs-danger
在图片上使用点击波特效
使用步骤
  • 在页面中引入必要的文件:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- If you want to use the buttons on the bootstrap -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     
    <!-- rippler CSS -->
    <link rel="stylesheet" href="./css/rippler.min.css">
     
    <!-- vendor js -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     
    <!-- rippler js -->
    <script src="./dist/js/jquery.rippler.min.js"></script>
  • 该点击波特效的HTML结构如下:
    1
    2
    3
    4
    5
    <body>
       
      <button class="btn btn-primary rippler rippler-default" href="#">bootstrap button</button>
     
    </body>
  • 在页面加载完毕后调用该点击波插件:$(document).ready(function() { $(".rippler").rippler({ effectClass : 'rippler-effect' ,effectSize : 16 // Default size (width & height) ,addElement : 'div' // e.g. 'svg'(feature) ,duration : 400 });});

浏览器兼容

该点击波特效需要CSS3的支持,可以运行在所有最新版的现代浏览器上。

  • IE10+
  • Safari
  • Chrome
  • Firefox
  • Opera

本文转载请注明出处:http://www.zhuiye.com/detail_23.html
评论区
  • 还没有评论,快来抢沙发吧!