一个菜鸟的互联网技术分享博客
您的位置: 主页 > 鼠标点击时出现小心心
advertisement

鼠标点击时出现小心心

代码如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>鼠标点击时出现小心心</title>  
  6. <style>  
  7.  .mydiv{  
  8.  width:1000px;  
  9.  height:500px;  
  10.  background-color:'#fff';  
  11.  border:12px solid green;  
  12.  }  
  13.   body{  
  14.   position:relative;  
  15.   }  
  16.   .xin_img {width: 20px;height: 20px;opacity: 1;position: absolute;z-index: 100000;transition: 2s;}  
  17.   .xin_left,.xin_right {width: 10px;height: 10px;border-radius: 100%;position: absolute;}  
  18.   .xin_right {right: 0;}  
  19.   .xin_under {width: 10px;height: 10px;position: absolute;top: 5px;left: 5px;transform: rotate(45deg)}  
  20.   .xin_text {width: 50px;font-size: 10px;line-height: 1;position: absolute;top: -1em;left: -15px;text-align: center;}  
  21.  </style>  
  22.    
  23.  </head>  
  24. <body>  
  25. <div class="mydiv"></div>  
  26. </body>  
  27. <script>  
  28.      // 点击出的文字数组,可自行添加,不要太多哦  
  29.       xin_text = ["你好呀~""点我呀~""啦啦啦~""哎呀呀~""求关注~""帅哥美女~""哦~""咦~"];  
  30.       // 计数  
  31.       var count = 0;  
  32.       // 鼠标按下事件  
  33.       document.body.onmousedown = function (e) {  
  34.          // 获取鼠标点击位置  
  35.          var x = event.pageX - 18;  
  36.          var y = event.pageY - 30;  
  37.          // 分别创建所需要的元素节点  
  38.          var xin_img = document.createElement("div");  
  39.          var xin_left = document.createElement("div");  
  40.          var xin_right = document.createElement("div");  
  41.          var xin_under = document.createElement("div");  
  42.          var xin_txt = document.createElement("div");  
  43.          // 通过随机数从文字数组中获取随机下标的文字  
  44.         var textNode = document.createTextNode(xin_text[parseInt(Math.random() * xin_text.length)]);  
  45.         // 文字添加到txt节点中  
  46.         xin_txt.appendChild(textNode);  
  47.    
  48.          xin_img.className = "xin_img" + " " + "xin_img" + count;  
  49.          xin_left.className = "xin_left";  
  50.          xin_right.className = "xin_right";  
  51.          xin_under.className = "xin_under";  
  52.         xin_txt.className = "xin_text";  
  53.          xin_img.style.top = y + "px";  
  54.         xin_img.style.left = x + "px";  
  55.          // 将创建的元素添加到容器中  
  56.         xin_img.appendChild(xin_left);  
  57.          xin_img.appendChild(xin_right);  
  58.         xin_img.appendChild(xin_under);  
  59.        xin_img.appendChild(xin_txt);  
  60.          document.body.appendChild(xin_img);  
  61.          // 获取随机颜色  
  62.          var color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," +  
  63.              parseInt(Math.random() * 255) + ")";  
  64.          xin_txt.style.color=color;  
  65.          for (var i = 0; i < 3; i++) {  
  66.              xin_img.children[i].style.background = color;  
  67.         }  
  68.      }  
  69.      // 鼠标抬起事件  
  70.      document.body.onmouseup = function () {  
  71.          document.getElementsByClassName("xin_img" + count)[0].style.transform = "scale(0.5)";  
  72.          document.getElementsByClassName("xin_img" + count)[0].style.transform = "translateY(-40px)";  
  73.          document.getElementsByClassName("xin_img" + count)[0].style.opacity = "0";  
  74.          count++;  
  75.     }  
  76.  </script>  
  77. </html>

zhangren.online
上一篇:JS实现无缝切换轮播图(自动+手动)
下一篇:使用qrcode生成二维码并实现当前页面截图

您可能喜欢

​如何将自己写的代码上传到github上

​如何将自己写的代码上传到github上

​jQuery数字字母组合验证码

​jQuery数字字母组合验证码

​es6常用数组操作及技巧汇总

​es6常用数组操作及技巧汇总

回到顶部