Widget:鼠标点击效果

<style> .sbspan{ /* 让弹出来的文字不被选中，影响操作体验 */ user-select: none; cursor: default; font-size: 12px; position: absolute; transition: .5s; z-index: 99;white-space: nowrap; } </style> <script> function clickT() {

   var rs = Math.floor(Math.random() * (170 - 100) + 100);
   var gs = Math.floor(Math.random() * (170 - 100) + 100);
   var bs = Math.floor(Math.random() * (100 - 90) + 90);
   return "rgb(" + rs + ',' + gs + ',' + bs + ")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换

} // 设置随机出现的文字数组 //结构 `任意文字`,`任意文字`,`${asimg("钢镐.png")}` //文字：`任意文字` //图片地址，去掉开头重复部分https://patchwiki.biligame.com/images/fangkuaifangzhou/2/24/gtjl5fvgmg16vcmthu70ee0f83dz560.png //图片加文字：`${asimg("2/24/gtjl5fvgmg16vcmthu70ee0f83dz560.png")}暴击👍~金矿+100 `

var as = [`${asimg("2/24/gtjl5fvgmg16vcmthu70ee0f83dz560.png")}暴击👍~金矿+100`,//钢镐 `${asimg("4/46/igwimldd91i8r6yck2zqiiges9looy2.png")}~铁矿+1`,//铁镐.png `${asimg("6/6a/oxbh2gc3td788kdiz6ny9v7wa734jdq.png")}🎮~PixARK~启动！`,//中式壁纸.png `${asimg("7/76/qun6qkc55jrov2r0ua3tbtrua8x6i3f.png")}~石头+1`,//石镐.png `${asimg("3/37/ixi0q3u0p42dgyxsjcxy0uk6uqtv1lz.png")}暴击✨~木头+100`,//钢斧.png `${asimg("7/74/kt06eneuvtmz7htldrahw99y99z98du.png")}~黑暗木+1`,//铁斧.png `${asimg("9/9b/p531cuoyc3kvrsrhqo8frr9dxid0s6b.png")}~魔纹木+1`,//铜斧.png `${asimg("3/3c/2r7ory5j84pf2dn848zgim1e02o94pj.png")}~煤炭+10`,//电钻.png `${asimg("d/d4/8jzdau0yj57yetnifris83178p1h51o.png")}~水+1`,//水袋.png `${asimg("4/46/7s5gvnjsblyy78amc6m7air483ugfh5.png")}~安康鱼+1`,//鱼竿.png `${asimg("1/15/hi0aj71l1gqtit878tuq2hvsxk00fgz.png")}~茅草+1`,//金属镰刀.png `${asimg("1/1d/9i4mvf8m92nqjvgpj1bu53ruvzohjrr.png")}暴击🎉~纤维+100`,//钢制镰刀.png `${asimg("a/a3/g79scnfswotnbvkb9ijrvfmj0q1196w.png")}~唯我独尊！！`,//涂鸦枪.png `${asimg("6/69/j9eawq1ezdg8mk82he3xyseyyizmytt.png")}击杀渡渡鸟+1`,//木棒.png `${asimg("c/ca/j4oiticfykssbxz2m0aa3yfrchexiek.png")}获得泰克能量方块+100`,//泰克步枪.png `${asimg("2/23/m7m5566xaxuj47wou083fbd7xeouyba.png")}~捕获霸王龙+1`,//睡眠镖.png `${asimg("4/47/pjxf3n2i3cpi1olsnujeruhh7cm2hlc.png")}全元素大法师就是我~！`,//大师法杖.png `${asimg("6/66/p4s4b4n6lekzul888yvswyyrffkm7bi.png")}家被偷了，快上线！`,//标志旗.png `${asimg("a/ac/8178p6fvdq8i6oni1c8j9asu4q7qykk.png")}~睡什么，起来肝活动！`,//圣诞壁灯.png `${asimg("6/6a/oxbh2gc3td788kdiz6ny9v7wa734jdq.png")}部落召唤！！`,//中式壁纸.png `${asimg("3/3e/0qgtyz5ic36pf5mp3w7bmzdr3bud8c8.png")}你的霸王龙需要留痕`,//霸王龙蛋.png `${asimg("a/a3/d9xhmt9j4k5hmu516y2y8mta4k2dvyn.png")}梦里啥都有、、`,//中式床.png `${asimg("0/0b/cp2xhalntkd0jlna2kn0ehqh70d812r.png")}欧皇附体👑~竹子天花板图纸+1`//竹子天花板设计图纸.png ]; //图片 function asimg(assss){

   return `<img src="https://patchwiki.biligame.com/images/fangkuaifangzhou/${assss}" style="width:30px;vertical-align:middle">`

} document.onclick = function(event){

   var e = event || window.event;
   var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
   // 创建元素节点对象
   var spans = document.createElement("spans")
   spans.className="sbspan"
   spans.innerHTML = as[Math.floor(Math.random() * as.length)]
   spans.style.color = clickT()
   //将span添加到body里
   document.body.appendChild(spans)
   if (document.body.offsetWidth<e.clientX+spans.offsetWidth) {
       spans.style.left = document.body.offsetWidth-spans.offsetWidth-20+ "px"
   }else{spans.style.left = e.clientX+ "px"}
   spans.style.top = e.pageY-27 + "px"|| e.clientY + scrollY-27 + "px";
   // 设置span的动画效果
   setTimeout(function () {
       spans.style.opacity = "1"
       spans.style.transform = "translateY(-50px) scale(1.05)"
   }, 100)
   setTimeout(function () {
       spans.style.opacity = "0"
       spans.style.transform = "translateY(-200px) scale(0)"
   }, 500)
   // setTimeout(function () {
   //     var chi = document.getElementsByTagName("spans")
   //     for (var i = 0; i < chi.length; i++) {
   //         if (chi[i].style.opacity == "0") {
   //             document.body.removeChild(chi[i])
   //         }
   //     }
   // }, 1000)
   //将span添加到body里
   //document.body.appendChild(spans)
   // setTimeout(() => {
   //     spans.remove();
   //     }, 1000);
   setTimeout(spans.remove(), 1000);

} </script>