网页页面鼠标点击文字特效
建站教程 阅读网页鼠标点击出现文字消失特效，页面鼠标点击特效
实现的方法很简单，还是老套路，在页面的任意位置加入如下代码即可（需要引入 jQuery）
效果一
<script>
jQuery(document).ready(function($) {
$("html,body").click(function(e){
var dfs=[
"您刚才的点击使计生局放开了"+Math.floor(Math.random()*100)+"胎政策。",
"您刚才的点击使黄石超级火山爆发了",
"您刚才的点击使罗辑又换了一个女朋友",
"您刚才的点击使小米公司收购了高通公司",
"您刚才的点击引爆了"+Math.random()*10000+"光年外的一颗恒星",
"您刚才的点击使头发变得乌黑浓密了",
"您刚才的点击使您的波函数坍塌了",
"您刚才的点击使您的银行卡被盗刷了",
"您刚才的点击使普朗克常数扩大了十倍",
"您刚才的点击熄灭了蓝色空间号二号主引擎",
"您刚才的点击创造了一个小宇宙",
"您刚才的点击使宇宙由开放转为闭合",
"您刚才的点击让云天明和关一帆在一起了",
"您刚才的点击使三体第"+Math.floor(Math.random()*100)+"舰队起航了",
"您刚才的点击使第"+Math.floor(Math.random()*10000)+"号宇宙毁灭了",
"您刚才的点击向太阳发射了一颗光粒",
"您刚才的点击导致三体行星撞上他的主星",
"您刚才的点击令人类文明将在"+(new Date()).getFullYear()+"年"+((new Date()).getMonth()+1)+"月"+(new Date()).getUTCDate()+"日23:59:59毁灭",
"您刚才的点击启动了威慑系统",
"您刚才的点击使谢顿计划脱离了正轨",
"您刚才的点击使程心按下了威慑开关",
"您刚才的点击引起了"+Math.random()*10000+"光年外一个行星的爆炸",
"您刚才的点击使宇宙中产生了一些暗物质",
"您刚才的点击引起了所有行星上的地震",
"您刚才的点击使一台诺基亚摔碎了",
"您刚才的点击使360云盘倒闭了",
"您刚才的点击小米发布了MIX概念手机",
"千万不要再次点击鼠标",
"真的千万不要再次点击鼠标"
];
var n=Math.floor(Math.random() * dfs.length + 1)-1; //随机获取一条数据
var $i=$("<p/>").text(dfs[n]); //新建一个b标签，并显示随机的话语
var x=e.pageX,y=e.pageY; //获取鼠标点击的x，和y
$i.css({ //为标签赋予css值
"z-index":99999,
"top":y-20,
"left":x,
"position":"absolute",
"color":"#E94F06",
"font-family":"微软雅黑",
"cursor":"default",
"-moz-user-select": "none",
"-webkit-user-select": "none",
"-ms-user-select": "none",
"-khtml-user-select": "none",
"user-select": "none",
});
$("body").append($i); //在尾部插入
$i.animate( {"top":y-180,"opacity":0}, 1500, function(){$i.remove();}); //动画消除
e.stopPropagation();
});
});
</script> 效果二
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.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://libs.baidu.com/jquery/1.8.3/jquery.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>本文链接：https://niujc.com/com/1436999.html
晚上好！当前时间为
目前距离2023年春节还有
TOP