jQuery點擊出現(xiàn)愛心特效
更新時間:2021年08月23日 08:34:55 作者:來干了這碗代碼
這篇文章主要為大家詳細介紹了jQuery點擊出現(xiàn)愛心特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery點擊出現(xiàn)愛心特效的具體代碼,供大家參考,具體內(nèi)容如下
代碼:
<!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); // 顏色數(shù)組 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"); // 向最外層內(nèi)添加內(nèi)層div divmain.appendChild(first); divmain.appendChild(second); // 根據(jù)鼠標位置來確定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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
jQuery中noconflict函數(shù)的實現(xiàn)原理分解
這篇文章主要介紹了jQuery中noconflict函數(shù)的實現(xiàn)原理分解,noconflict是用來防止變量沖突的,本文就分解了它的實現(xiàn)原理,并分析了它的實現(xiàn)源碼,需要的朋友可以參考下2015-02-02jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)(生成樹)
本篇文章主要介紹了jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)(生成樹),具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-02-02