美文网首页
html页面点击屏幕弹出文字效果

html页面点击屏幕弹出文字效果

作者: 七百年前 | 来源:发表于2018-08-16 09:51 被阅读101次
1. image.png
<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="UTF-8">
    </head>
    <body id="nv_forum" class="pg_viewthread" onkeydown="if(event.keyCode==27) return false;" style="height: 700px; margin: 0 auto;">


    </body>
    <script type="text/javascript">
        (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;}}}}());
    </script>
    </html>

相关文章

网友评论

      本文标题:html页面点击屏幕弹出文字效果

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