页面点击飘字
Posted Med1tator
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面点击飘字相关的知识，希望对你有一定的参考价值。
页面文件如下：
<!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代码部分提交受阻，所以暂时先注释。
以上是关于页面点击飘字的主要内容，如果未能解决你的问题，请参考以下文章