
多种效果的ripplet.js按钮点击波动画特效,可以自定义参数制作并控制点击波效果,生成自己风格的点击波插件代码。
js代码
<script type=\"text/javascript\" src=\"js/ripplet.js\"></script>
<script>
// window.event polyfill for Gecko
if (!Object.prototype.hasOwnProperty.call(window, \'event\')) {
[\'mousedown\', \'mouseenter\', \'onmouseleave\'].forEach(function (eventType) {
window.addEventListener(eventType, function (event) { window.event = event }, true);
});
}
// heading ripplet
window.addEventListener(\'load\', function () {
setTimeout(function () {
var heading = document.querySelector(\'h1.title\');
var headingRect = heading.getBoundingClientRect();
headingRipplet();
function headingRipplet() {
var spreadingDuration = Math.floor(4000 * Math.random() + 200);
ripplet(
{
currentTarget: heading,
clientX: headingRect.left + Math.random() * headingRect.width,
clientY: headingRect.top + Math.random() * headingRect.height,
},
{
color: \'rgba(\'
+ Math.floor(Math.random() * 256) + \',\'
+ Math.floor(Math.random() * 256) + \',\'
+ Math.floor(Math.random() * 256) + \',\'
+ (Math.random() * .3 + .1)
+ \')\',
spreadingDuration: spreadingDuration + \'ms\',
clearingDelay: Math.floor(spreadingDuration * .8) + \'ms\',
clearingDuration: Math.floor(spreadingDuration * .6) + \'ms\',
}
);
setTimeout(headingRipplet, Math.floor(4000 * Math.random() * Math.random()));
}
});
});
</script>










暂无评论内容