Loading...

OneNav主题-给页面添加点击页面出现富强、民主、文明这类文字动画效果

教程分享3年前 (2022)发布 战东海
296 0 0
JS代码放到全局内容页尾(全局 : html > body ( footer_js_after ))
<script> 
    !function() {
    var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],
        index = Math.floor(Math.random() * coreSocialistValues.length);
    document.body.addEventListener('click', function(e) {
        if (e.target.tagName == 'A') {
            return;
        }
        var x = e.pageX,
            y = e.pageY,
            span = document.createElement('span');
        span.textContent = coreSocialistValues[index];
        index = (index + 1) % coreSocialistValues.length;
        span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #1976d2; top: ', y - 20, 'px; left: ', x, 'px;'].join('');
        document.body.appendChild(span);
        animate(span);
    });
 
    function animate(el) {
        var i = 0,
            top = parseInt(el.style.top),
            id = setInterval(frame, 16.7);
 
        function frame() {
            if (i > 180) {
                clearInterval(id);
                el.parentNode.removeChild(el);
            } else {
                i += 2;
                el.style.top = top - i + 'px';
                el.style.opacity = (180 - i) / 180;
            }
        }
    }
    }()
© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...
TAB栏自定义颜色

背景颜色

文字颜色

网址设置

网址样式切换

详细

网址卡片按钮

显示

布局设置

左侧边栏菜单

展开

页面最大宽度

1900px

搜索框设置

搜索框背景上下位置

仅对图片背景生效

50%

自定义搜索框背景

  • 未知类型

    骑行

  • 未知类型

    风景

自定义搜索框高度

  • 聚焦
  • 信息
  • 默认
自定义设置