网页鼠标点击出现文字消失特效
效果展示: 点我
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://blog.hlzyw.cn/style/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> /* 鼠标点击特效 */ jQuery(function () { $("html").click(function(e) { var a_idx = Math.floor((Math.random() * 26)); var a = new Array( "乐观", "❤", "积极", "向上", "自由", "正能量", "(*^▽^*)", "元气满满", "开心", "快乐", "善良", "可爱", "暴富", "暴瘦", "❤","富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善" ); var color1 = Math.floor((Math.random() * 255)); var color2 = Math.floor((Math.random() * 255)); var color3 = Math.floor((Math.random() * 255)); var $i = $("<span />").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 9999999999999 , "top": y - 20, "left": x, "position": "absolute", "font-family":"mmm", "fontSize":Math.floor((Math.random() * 22)+15), "font-weight": "bold", "color": "rgb("+color1+","+color2+","+color3+")", "-webkit-user-select":"none", "-moz-user-select":"none", "-ms-user-select":"none", "user-select":"none", }); $("body").append($i); $i.animate({ "top": y - 200, "opacity": 0 }, 1000, function() { $i.remove(); }); }); }); </script> </head> <body> </body> </html>
注释补充版的:
<!DOCTYPE html> <html lang="zh"> <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>鼠标点击网页出现文字特效</title> </head> <body> <!-- 首先导入jq插件 --> <script src="https://blog.hlzyw.cn/style/js/jquery-1.8.3.min.js"></script> <script> //鼠标点击特效 //页面加载事件 jQuery(function () { //声明变量 var 点击数 = 0; //给页面创建点击事件 $("html").click(function (e) { //创建颜色库 //随机颜色 //创建颜色码 const 前颜色码库 = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff'); const 中颜色码库 = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff'); const 后颜色码库 = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff'); //从颜色库选取一种颜色;当然这是数组的方式;随机性 var 前颜色码 = Math.floor(Math.random() * 前颜色码库.length); var 中颜色码 = Math.floor(Math.random() * 中颜色码库.length); var 后颜色码 = Math.floor(Math.random() * 后颜色码库.length); // console.log("前颜色码 = " + 前颜色码 + "; 中颜色码 = " + 中颜色码 + "; 后颜色码 = " + 后颜色码 + ";") // console.log("#" + 前颜色码库[前颜色码] + 中颜色码库[中颜色码] + 后颜色码库[后颜色码]); //每当鼠标点击页面增加点击数 点击数++; //创建元素; 创建的元素是span元素,这个元素的内容是"鼠标点击了第" + 点击数(这个是一个变量) + "次" var 创建元素 = $("<span>").text("鼠标点击了第" + 点击数 + "次"); //在页面上添加span元素 jQuery("html").append(创建元素); //获取鼠标点击坐标 var 横坐标 = e.pageX; var 纵坐标 = e.pageY; //给span元素添加css样式 创建元素.css({ "z-index": 999, //设置或获取定位对象的堆叠次序(z-index):999 "top": 纵坐标 - 20, //上(top):y-20 "left": 横坐标, //左:x "position": "absolute", //定位:绝对定位 "font-weight": "bold", //字体粗细:粗体 "color": "#" + 前颜色码库[前颜色码] + 中颜色码库[中颜色码] + 后颜色码库[后颜色码], //颜色:绿色 "user-select": "none", //使文字不被选中 }); // 创建元素.animate({ "top": 纵坐标 - 180, //上:y-180 "opacity": 0 //透明度(opacity):0 }, 2000, //1500,调节动画速度 function () { //功能函数 创建元素.remove(); //$i的删除 } ); }) }) </script> </body>
