美文网首页程序员
Framework7 中mo.js效果不显示的原因及解决办法

Framework7 中mo.js效果不显示的原因及解决办法

作者: MidWong | 来源:发表于2018-08-16 16:11 被阅读51次

    近日想在自己的项目中给一些按钮增加一些点击特效,以提升用户体验,使用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;
    

    搞定。

    相关文章

      网友评论

        本文标题:Framework7 中mo.js效果不显示的原因及解决办法

        本文链接:https://www.haomeiwen.com/subject/jerobftx.html