<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
(function(){
var a_idx = 0;
window.onclick = function(event){
var a = new Array("❤富強❤","❤民主❤","❤文明❤","❤和諧❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤愛國❤","❤敬業❤","❤誠信❤","❤友善❤");
var heart = document.createElement("b"); //創建b元素
heart.onselectstart = new Function('event.returnValue=false'); //防止拖動
document.body.appendChild(heart).innerHTML = a[a_idx]; //將b元素添加到頁面上
a_idx = (a_idx + 1) % a.length;
heart.style.cssText = "position: fixed;left:-100%;"; //給p元素設置樣式
var f = 16, // 字體大小
x = event.clientX - f / 2, // 橫座標
y = event.clientY - f, // 縱座標
c = randomColor(), // 隨機顏色
a = 1, // 透明度
s = 1.2; // 放大縮小
var timer = setInterval(function(){ //添加定時器
if(a <= 0){
document.body.removeChild(heart);
clearInterval(timer);
}else{
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";
y--;
a -= 0.016;
s += 0.002;
}
},15)
}
// 隨機顏色
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
}
}());
</script>
</body>
</html>
鼠標點擊特效一
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur