jQuery點(diǎn)擊出現(xiàn)愛(ài)心特效
本文實(shí)例為大家分享了jQuery點(diǎn)擊出現(xiàn)愛(ài)心特效的具體代碼,供大家參考,具體內(nèi)容如下
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>愛(ài)心效果</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ù)鼠標(biāo)位置來(lái)確定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加隨機(jī)顏色 first.style.backgroundColor = color[num]; second.style.backgroundColor = color[num]; body.appendChild(divmain); $(".love").animate({ opacity: "0", top: "-=50px" }, 1500); } // 利用定時(shí)器來(lái)清除頁(yè)面的垃圾 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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05jQuery中noconflict函數(shù)的實(shí)現(xiàn)原理分解
這篇文章主要介紹了jQuery中noconflict函數(shù)的實(shí)現(xiàn)原理分解,noconflict是用來(lái)防止變量沖突的,本文就分解了它的實(shí)現(xiàn)原理,并分析了它的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-02-02jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)(生成樹)
本篇文章主要介紹了jquery使用EasyUI Tree異步加載JSON數(shù)據(jù)(生成樹),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-02-02jquery.form.js用法之清空f(shuō)orm的方法
這篇文章主要介紹了jquery.form.js清空f(shuō)orm的方法,需要的朋友可以參考下2014-03-03jquery與js實(shí)現(xiàn)全選功能的區(qū)別
這篇文章主要介紹了jquery與js實(shí)現(xiàn)全選功能的區(qū)別,需要的朋友可以參考下2017-06-06jQuery簡(jiǎn)單實(shí)現(xiàn)上下,左右滑動(dòng)的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)上下,左右滑動(dòng)的方法,涉及jQuery動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06基于jQuery中ajax的相關(guān)方法匯總(必看篇)
下面小編就為大家?guī)?lái)一篇基于基于jQuery中ajax的相關(guān)方法匯總。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11