近日想在自己的项目中给一些按钮增加一些点击特效,以提升用户体验,使用mo.js;
根据官方文档 http://mojs.io/ 调试出来自己想要的特效,加入到项目中去点击无效果,控制台也没报错。
源码如下:
<script src="https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js"></script>
<script type="text/javascript">
const burstEverywhere = new mojs.Burst({
left: 0, top: 0,
radius: { 4: 19 },
angle: 45,
children: {
shape: 'line',
radius: 3,
scale: 1,
stroke: '#FD7932',
strokeDasharray: '100%',
strokeDashoffset: { '-100%' : '100%' },
duration: 700,
easing: 'quad.out',
}
});
document.addEventListener('click', function (e) {
burstEverywhere.tune({x: e.pageX, y: e.pageY}).setSpeed(3).replay();
});
</script>
在空白html中会有点击特效。
一开始怎么都没想出原因来,后来在用PS作图的时候突然想起来,Framework7创建的view会不会把显示出点击效果遮在下边了,赶紧测试!
设置z-index如下:
burstEverywhere.el.style.zIndex = 999999;
搞定。
网友评论