0

Ripple.JS ( GitHub | Demo | CDN ) 为 HTML 元素添加了 Material 样式的波纹，如下所示：

$.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
});

问：有没有办法以编程方式调用它？

jsFiddle和 Stack Snippets中的演示

$.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>

4

1 回答 1

0

波纹是由库内部命名的本地函数创建的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;

为了伪造这一点，我们必须从头开始构建和触发我们自己的自定义jQuery Event 对象，然后通过使用,和像这样找到我们的新对象的中心来存根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和 Stack Snippets中的演示

$.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>

于 2018-02-09T20:48:05.677 回答