注册 登录 充值会员 退出
联系客服 毕业设计 java源码 PHP源码
充值

ripplet.js按钮点击波动画特效

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2022-03-27
ripplet.js按钮点击波动画特效
多种效果的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>

关注公众号,免费赠送安装视频教程、环境和学习视频,后面会不断更新。