页面点击飘字

最新推荐文章于 2022-08-12 23:22:52 发布

转载最新推荐文章于 2022-08-12 23:22:52 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Med1tator/p/9143991.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的HTML页面结构，并通过JavaScript实现了一个趣味功能：点击页面任意位置时显示社会主义核心价值观的一个词汇并向上飘动的效果。由于博客中JS代码部分被注释掉，无法直接查看完整功能。

页面文件如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body style="height: 800px; margin: auto 0px">
</body>

</html>
<script>
    // (function() {
    //     var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
    //     var 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>

博客js代码部分提交受阻，所以暂时先注释。

转载于:https://www.cnblogs.com/Med1tator/p/9143991.html