代码之家 › 专栏 › 技术社区 › KyleMit Steven Vachon

以编程方式调用rippleJs

ripplejs material-design jquery-plugins javascript

KyleMit Steven Vachon · 技术社区 · 8 年前

涟漪JS公司 ( GitHub | Demo | CDN )向HTML元素添加材质样式涟漪,如下所示:

$.ripple(".btn", {
  on: 'mousedown', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

Q: 有没有一种方法可以通过编程方式调用它?

在中演示 jsFiddle &堆栈代码段

$.ripple(".btn", {
  on: 'mousedown', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

body {
  padding: 15px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
  

<button class="btn btn-primary btn-lg" >Click Me</button>

1 回复 | 直到 8 年前

KyleMit Steven Vachon 8 年前

涟漪由名为 Trigger 图书馆内部。因为它是本地声明的,所以我们不能直接执行它,但我们可以在 options.on 背景

我们唯一会遇到的路障就是所有的涟漪 一定是从什么地方来的 ( 直观地和编程地 ),触发器函数将依赖于从如下传入的事件坐标中获取此信息 ripple.js#L107 :

var x = e.pageX - $this.offset().left - $ripple.width() / 2;
var y = e.pageY - $this.offset().top - $ripple.height() / 2;

要伪造这个,我们必须 trigger 我们自己的习惯 jQuery Event object 从头开始,然后将 pageX 和 pageY 属性,通过使用 $.offset , .outerWidth() 和 .outerHeight() 这样地

$.ripple(".btn", {
  on: 'mousedown ripple', // The event(s) to trigger a ripple effect
});

function InvokeRipple($el) {
  var event = jQuery.Event("ripple");
  event.pageX = $el.offset().left + $el.outerWidth() / 2;
  event.pageY = $el.offset().top + $el.outerHeight() / 2;
  $($el).trigger(event)
}

在中演示 jsFiddle &堆栈代码段

$.ripple(".btn", {
  on: 'mousedown ripple', // The event to trigger a ripple effect
  opacity: 0.4,    // The opacity of the ripple
  color: "auto",   // Set the background color. "auto" will use the text color
  duration: 0.7,   // The duration of the ripple
  easing: 'linear' // The CSS3 easing function of the ripple
});

$("#click").click(function() {
  InvokeRipple($("#info"))
});

function InvokeRipple($el) {
	var event = jQuery.Event("ripple");
  event.pageX = $el.offset().left + $el.outerWidth() / 2;
  event.pageY = $el.offset().top + $el.outerHeight() / 2;
  $($el).trigger(event)
}

body {
  padding: 15px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Ripple.js/1.2.1/ripple.js"></script>
  

<button class="btn btn-primary btn-lg" id="click" >Invoke Ripple on other button</button>
<button class="btn btn-info btn-lg" id="info" >More Info</button>