当前位置：网站首页>special effects - 鼠标点击，出现随机设置的文字

special effects - 鼠标点击，出现随机设置的文字

2022-07-24 05:17:00 【Jie_1997】

鼠标点击，出现随机设置的文字

一. 效果图
二. 实现代码

一. 效果图

在这里插入图片描述

二. 实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>鼠标点击出现随机设置的文字</title>
  </head>

  <body>
    <script> (function() {
       var a_idx = 0; window.onclick = function(event) {
       var a = new Array( "富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善" ); var dom = document.createElement("b"); //创建b元素 dom.onselectstart = new Function("event.returnValue=false"); //防止拖动 document.body.appendChild(dom).innerHTML = a[a_idx]; //将b元素添加到页面上 a_idx = (a_idx + 1) % a.length; dom.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式 var f = 16, // 字体大小 x = event.clientX - f / 2, // 横坐标 y = event.clientY - f, // 纵坐标 c = randomColor(), // 随机颜色 a = 1, // 透明度 s = 1.2; // 放大缩小 var timer = setInterval(function() {
       //添加定时器 if (a <= 0) {
       document.body.removeChild(dom); clearInterval(timer); } else {
       dom.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");"; y--; a -= 0.016; s += 0.002; } }, 15); }; // 随机颜色 function randomColor() {
       return ( "rgb(" + ~~(Math.random() * 255) + "," + ~~(Math.random() * 255) + "," + ~~(Math.random() * 255) + ")" ); } })(); </script>
  </body>
</html>