<!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>