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

<span class="token operator"><span class="tag"><</span></span><span class="tag">script</span><span class="token operator"><span class="tag">></span></span> 
    <span class="token operator"><span class="pun">!</span></span><span class="token keyword"><span class="kwd">function</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="token punctuation"><span class="pun">)</span></span> <span class="token punctuation"><span class="pun">{</span></span>
    <span class="token keyword"><span class="kwd">var</span></span><span class="pln"> coreSocialistValues </span><span class="token operator"><span class="pun">=</span></span> <span class="token punctuation"><span class="pun">[</span></span><span class="token string double-quoted-string"><span class="str">"富强"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"民主"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"文明"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"和谐"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"自由"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"平等"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"公正"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"法治"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"爱国"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"敬业"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"诚信"</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string double-quoted-string"><span class="str">"友善"</span></span><span class="token punctuation"><span class="pun">]</span></span><span class="token punctuation"><span class="pun">,</span></span><span class="pln">
        index </span><span class="token operator"><span class="pun">=</span></span> <span class="typ">Math</span><span class="token operator"><span class="pun">.</span></span><span class="token function"><span class="pln">floor</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="typ">Math</span><span class="token operator"><span class="pun">.</span></span><span class="token function"><span class="pln">random</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="token punctuation"><span class="pun">)</span></span> <span class="token operator"><span class="pun">*</span></span><span class="pln"> coreSocialistValues</span><span class="token operator"><span class="pun">.</span></span><span class="pln">length</span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">;</span></span><span class="pln">
    document</span><span class="token operator"><span class="pun">.</span></span><span class="pln">body</span><span class="token operator"><span class="pun">.</span></span><span class="token function"><span class="pln">addEventListener</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="token string single-quoted-string"><span class="str">'click'</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token keyword"><span class="kwd">function</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="pln">e</span><span class="token punctuation"><span class="pun">)</span></span> <span class="token punctuation"><span class="pun">{</span></span>
        <span class="token keyword"><span class="kwd">if</span></span> <span class="token punctuation"><span class="pun">(</span></span><span class="pln">e</span><span class="token operator"><span class="pun">.</span></span><span class="pln">target</span><span class="token operator"><span class="pun">.</span></span><span class="pln">tagName </span><span class="token operator"><span class="pun">==</span></span> <span class="token string single-quoted-string"><span class="str">'A'</span></span><span class="token punctuation"><span class="pun">)</span></span> <span class="token punctuation"><span class="pun">{</span></span>
            <span class="token keyword"><span class="kwd">return</span></span><span class="token punctuation"><span class="pun">;</span></span>
        <span class="token punctuation"><span class="pun">}</span></span>
        <span class="token keyword"><span class="kwd">var</span></span><span class="pln"> x </span><span class="token operator"><span class="pun">=</span></span><span class="pln"> e</span><span class="token operator"><span class="pun">.</span></span><span class="pln">pageX</span><span class="token punctuation"><span class="pun">,</span></span><span class="pln">
            y </span><span class="token operator"><span class="pun">=</span></span><span class="pln"> e</span><span class="token operator"><span class="pun">.</span></span><span class="pln">pageY</span><span class="token punctuation"><span class="pun">,</span></span><span class="pln">
            span </span><span class="token operator"><span class="pun">=</span></span><span class="pln"> document</span><span class="token operator"><span class="pun">.</span></span><span class="token function"><span class="pln">createElement</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="token string single-quoted-string"><span class="str">'span'</span></span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">;</span></span><span class="pln">
        span</span><span class="token operator"><span class="pun">.</span></span><span class="pln">textContent </span><span class="token operator"><span class="pun">=</span></span><span class="pln"> coreSocialistValues</span><span class="token punctuation"><span class="pun">[</span></span><span class="pln">index</span><span class="token punctuation"><span class="pun">]</span></span><span class="token punctuation"><span class="pun">;</span></span><span class="pln">
        index </span><span class="token operator"><span class="pun">=</span></span> <span class="token punctuation"><span class="pun">(</span></span><span class="pln">index </span><span class="token operator"><span class="pun">+</span></span> <span class="token number"><span class="lit">1</span></span><span class="token punctuation"><span class="pun">)</span></span> <span class="token operator"><span class="pun">%</span></span><span class="pln"> coreSocialistValues</span><span class="token operator"><span class="pun">.</span></span><span class="pln">length</span><span class="token punctuation"><span class="pun">;</span></span><span class="pln">
        span</span><span class="token operator"><span class="pun">.</span></span><span class="pln">style</span><span class="token operator"><span class="pun">.</span></span><span class="pln">cssText </span><span class="token operator"><span class="pun">=</span></span> <span class="token punctuation"><span class="pun">[</span></span><span class="token string single-quoted-string"><span class="str">'z-index: 9999999; position: absolute; font-weight: bold; color: #1976d2; top: '</span></span><span class="token punctuation"><span class="pun">,</span></span><span class="pln"> y </span><span class="token operator"><span class="pun">-</span></span> <span class="token number"><span class="lit">20</span></span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string single-quoted-string"><span class="str">'px; left: '</span></span><span class="token punctuation"><span class="pun">,</span></span><span class="pln"> x</span><span class="token punctuation"><span class="pun">,</span></span> <span class="token string single-quoted-string"><span class="str">'px;'</span></span><span class="token punctuation"><span class="pun">]</span></span><span class="token operator"><span class="pun">.</span></span><span class="token function"><span class="pln">join</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="token string single-quoted-string"><span class="str">''</span></span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">;</span></span><span class="pln">
        document</span><span class="token operator"><span class="pun">.</span></span><span class="pln">body</span><span class="token operator"><span class="pun">.</span></span><span class="token function"><span class="pln">appendChild</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="pln">span</span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">;</span></span>
        <span class="token function"><span class="pln">animate</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="pln">span</span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">;</span></span>
    <span class="token punctuation"><span class="pun">}</span></span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">;</span></span>
 
    <span class="token keyword"><span class="kwd">function</span></span> <span class="token function"><span class="pln">animate</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="pln">el</span><span class="token punctuation"><span class="pun">)</span></span> <span class="token punctuation"><span class="pun">{</span></span>
        <span class="token keyword"><span class="kwd">var</span></span><span class="pln"> i </span><span class="token operator"><span class="pun">=</span></span> <span class="token number"><span class="lit">0</span></span><span class="token punctuation"><span class="pun">,</span></span><span class="pln">
            top </span><span class="token operator"><span class="pun">=</span></span> <span class="token function"><span class="pln">parseInt</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="pln">el</span><span class="token operator"><span class="pun">.</span></span><span class="pln">style</span><span class="token operator"><span class="pun">.</span></span><span class="pln">top</span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">,</span></span><span class="pln">
            id </span><span class="token operator"><span class="pun">=</span></span> <span class="token function"><span class="pln">setInterval</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="pln">frame</span><span class="token punctuation"><span class="pun">,</span></span> <span class="token number"><span class="lit">16.7</span></span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">;</span></span>
 
        <span class="token keyword"><span class="kwd">function</span></span> <span class="token function"><span class="pln">frame</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="token punctuation"><span class="pun">)</span></span> <span class="token punctuation"><span class="pun">{</span></span>
            <span class="token keyword"><span class="kwd">if</span></span> <span class="token punctuation"><span class="pun">(</span></span><span class="pln">i </span><span class="token operator"><span class="pun">></span></span> <span class="token number"><span class="lit">180</span></span><span class="token punctuation"><span class="pun">)</span></span> <span class="token punctuation"><span class="pun">{</span></span>
                <span class="token function"><span class="pln">clearInterval</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="pln">id</span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">;</span></span><span class="pln">
                el</span><span class="token operator"><span class="pun">.</span></span><span class="pln">parentNode</span><span class="token operator"><span class="pun">.</span></span><span class="token function"><span class="pln">removeChild</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="pln">el</span><span class="token punctuation"><span class="pun">)</span></span><span class="token punctuation"><span class="pun">;</span></span>
            <span class="token punctuation"><span class="pun">}</span></span> <span class="token keyword"><span class="kwd">else</span></span> <span class="token punctuation"><span class="pun">{</span></span><span class="pln">
                i </span><span class="token operator"><span class="pun">+=</span></span> <span class="token number"><span class="lit">2</span></span><span class="token punctuation"><span class="pun">;</span></span><span class="pln">
                el</span><span class="token operator"><span class="pun">.</span></span><span class="pln">style</span><span class="token operator"><span class="pun">.</span></span><span class="pln">top </span><span class="token operator"><span class="pun">=</span></span><span class="pln"> top </span><span class="token operator"><span class="pun">-</span></span><span class="pln"> i </span><span class="token operator"><span class="pun">+</span></span> <span class="token string single-quoted-string"><span class="str">'px'</span></span><span class="token punctuation"><span class="pun">;</span></span><span class="pln">
                el</span><span class="token operator"><span class="pun">.</span></span><span class="pln">style</span><span class="token operator"><span class="pun">.</span></span><span class="pln">opacity </span><span class="token operator"><span class="pun">=</span></span> <span class="token punctuation"><span class="pun">(</span></span><span class="token number"><span class="lit">180</span></span> <span class="token operator"><span class="pun">-</span></span><span class="pln"> i</span><span class="token punctuation"><span class="pun">)</span></span> <span class="token operator"><span class="pun">/</span></span> <span class="token number"><span class="lit">180</span></span><span class="token punctuation"><span class="pun">;</span></span>
            <span class="token punctuation"><span class="pun">}</span></span>
        <span class="token punctuation"><span class="pun">}</span></span>
    <span class="token punctuation"><span class="pun">}</span></span>
    <span class="token punctuation"><span class="pun">}</span></span><span class="token punctuation"><span class="pun">(</span></span><span class="token punctuation"><span class="pun">)</span></span>
generic
15.29 KB
© 爱导航
<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;
            }
        }
    }
    }()