鼠标点击网页出现文字特效
Posted tis100204
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标点击网页出现文字特效相关的知识，希望对你有一定的参考价值。
<!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="../js/jquery-1.11.0.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>
</html>
以上是关于鼠标点击网页出现文字特效的主要内容，如果未能解决你的问题，请参考以下文章