溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹jQuery如何實現點擊出現愛心特效，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體內容如下
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>愛心效果</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<style type="text/css">
#love {
width: 30px;
height: 30px;
/*border: 1px solid red;*/
position: absolute;
}
#first {
width: 15px;
height: 26px;
background-color: red;
position: absolute;
right: 3.2px;
bottom: 0;
transform: rotate(45deg);
border-radius: 10px 10px 1px 1px;
opacity: 1;
}
#second {
width: 15px;
height: 26px;
background-color: red;
position: absolute;
left: 3.2px;
bottom: 0;
transform: rotate(-45deg);
border-radius: 10px 10px 1px 1px;
opacity: 1;
}
</style>
</head>
<body></body>
<script type="text/javascript">
function random(lower, upper) {
return Math.floor(Math.random() * (upper - lower)) + lower;
}
var body = document.getElementsByTagName("body")[0];
document.onclick = function(e) {
var num = random(0, 19);
// 顏色數組
var color = ["peru", "goldenrod", "yellow",
"chartreuse", "palevioletred", "deeppink",
"pink", "palegreen", "plum",
"darkorange", "powderblue", "orangered",
"orange", "orchid", "red",
"aqua", "salmon", "gold", "lawngreen"
]
var divmain = document.createElement("div");
var first = document.createElement("div");
var second = document.createElement("div");
// 給div加屬性
divmain.setAttribute("id", "love");
divmain.setAttribute("class", "love");
first.setAttribute("id", "first");
second.setAttribute("id", "second");
// 向最外層內添加內層div
divmain.appendChild(first);
divmain.appendChild(second);
// 根據鼠標位置來確定div的位置
//divmain.style.top = e.pageY + "px";
//divmain.style.left = e.pageX + "px";
divmain.style.cssText = "top:" + e.pageY + "px;left:" + e.pageX + "px";
// 給心形div加隨機顏色
first.style.backgroundColor = color[num];
second.style.backgroundColor = color[num];
body.appendChild(divmain);
$(".love").animate({
opacity: "0",
top: "-=50px"
}, 1500);
}
// 利用定時器來清除頁面的垃圾
setInterval(function() {
var div = document.getElementsByClassName("love");
var len = div.length;
var num;
for(var i = len - 1; i >= 0; i--) {
num = parseInt(div[i].style.opacity);
if(num <= 0) {
div[i].remove();
}
}
}, 3500);
</script>
</html>以上是“jQuery如何實現點擊出現愛心特效”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
