zoukankan      html  css  js  c++  java
  • js 社会主义点击事件

    index.js

    效果演示地址: https://www.purecss.cn/

    (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: #ff6651; 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;
                }
            }
        }
    }());
  • 相关阅读:
    洛谷7月月赛 B 题解
    undone
    树剖学习
    关于两周后noip---小计划
    线段树技巧练习--GSS1
    链式前向星存图及注意要点
    错题集合
    树上差分问题
    2020暑假学习内容整理及后续计划
    安利大佬博客
  • 原文地址:https://www.cnblogs.com/CyLee/p/10191260.html
Copyright © 2011-2022 走看看