您好,登錄后才能下訂單哦!
基于Html+CSS+JS怎樣實(shí)現(xiàn)手動(dòng)放煙花效果,很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
注意看有兩種模式哦,可以自由切換,鼠標(biāo)點(diǎn)哪里哪里有煙花,還可以自動(dòng)放煙花
視頻演示:html+css寫一個(gè)煙花,源碼請(qǐng)你直接拿走!
<div id="tips"> <a id="manual" href="javascript:;" rel="external nofollow" rel="external nofollow" >手動(dòng)放煙花</a> <a id="auto" href="javascript:;" rel="external nofollow" rel="external nofollow" >自動(dòng)放煙花</a> </div>
以下樣式大部分是js代碼渲染上dom后表現(xiàn)出來(lái)的
html, body { overflow: hidden; } body, div, p { margin: 0; padding: 0; } body { background: #000; font: 12px/1.5 arial; color: #7A7A7A; } a { text-decoration: none; outline: none; } #tips, #copyright { position: absolute; width: 100%; height: 50px; text-align: center; background: #171717; border: 2px solid #484848; } #tips { top: 0; border-width: 0 0 2px; } #tips a { font: 14px/30px arial; color: #FFF; background: #F06; display: inline-block; margin: 10px 5px 0; padding: 0 15px; border-radius: 15px; } #tips a.active { background: #FE0000; } #copyright { bottom: 0; line-height: 50px; border-width: 2px 0 0; } #copyright a { color: #FFF; background: #7A7A7A; padding: 2px 5px; border-radius: 10px; } #copyright a:hover { background: #F90; } p { position: absolute; top: 55px; width: 100%; text-align: center; }
var fgm = { on: function (element, type, handler) { return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler) }, un: function (element, type, handler) { return element.removeEventListener ? element.removeEventListener(type, handler, false) : element.detachEvent("on" + type, handler) }, bind: function (object, handler) { return function () { return handler.apply(object, arguments) } }, randomRange: function (lower, upper) { //產(chǎn)生范圍在lower~upper的隨機(jī)數(shù) return Math.floor(Math.random() * (upper - lower + 1) + lower) }, getRanColor: function () { //隨機(jī)獲得十六進(jìn)制顏色 var str = this.randomRange(0, 0xFFFFFF).toString(16); while (str.length < 6) str = "0" + str; return "#" + str } }; //初始化對(duì)象 function FireWorks() { this.type = 0; this.timer = null; this.fnManual = fgm.bind(this, this.manual) } FireWorks.prototype = { initialize: function () { clearTimeout(this.timer); fgm.un(document, "click", this.fnManual); switch (this.type) { case 1: fgm.on(document, "click", this.fnManual); break; case 2: this.auto(); break; }; }, manual: function (event) { event = event || window.event; this.__create__({ x: event.clientX, y: event.clientY }); }, auto: function () { var that = this; that.timer = setTimeout(function () { that.__create__({ x: fgm.randomRange(50, document.documentElement.clientWidth - 50), y: fgm.randomRange(50, document.documentElement.clientHeight - 150) }) that.auto(); }, fgm.randomRange(900, 1100)) }, __create__: function (param) { //param即鼠標(biāo)點(diǎn)擊點(diǎn)(即煙花爆炸點(diǎn)) var that = this; var oEntity = null; var oChip = null; var aChip = []; var timer = null; var oFrag = document.createDocumentFragment(); oEntity = document.createElement("div"); with (oEntity.style) { //煙花上升過(guò)程實(shí)體初始化 position = "absolute"; //初始位置距網(wǎng)頁(yè)頂部為:整個(gè)網(wǎng)頁(yè)的高度(處于網(wǎng)頁(yè)底部) top = document.documentElement.clientHeight + "px"; left = param.x + "px"; width = "4px"; height = "30px"; borderRadius = "4px"; background = fgm.getRanColor(); }; document.body.appendChild(oEntity); //window.setInterval方法 該方法使得一個(gè)函數(shù)每隔固定時(shí)間被調(diào)用一次 // console.log(param.y); oEntity.timer = setInterval(function () { // console.log(oEntity.offsetTop); // console.log(oEntity.style.top); oEntity.style.top = oEntity.offsetTop - 20 + "px"; //判斷煙花是否上升到或者第一次超過(guò)上次鼠標(biāo)點(diǎn)擊位置 if (oEntity.offsetTop <= param.y) { //煙花爆炸 clearInterval(oEntity.timer); document.body.removeChild(oEntity); (function () { //在50-100之間隨機(jī)生成碎片 //由于IE瀏覽器處理效率低, 隨機(jī)范圍縮小至20-30 //自動(dòng)放煙花時(shí), 隨機(jī)范圍縮小至20-30 var len = (/msie/i.test(navigator.userAgent) || that.type == 2) ? fgm.randomRange(20, 30) : fgm.randomRange(50, 100) //產(chǎn)生所有煙花爆炸顆粒實(shí)體 for (i = 0; i < len; i++) { //煙花顆粒形態(tài)實(shí)體 oChip = document.createElement("div"); with (oChip.style) { position = "absolute"; top = param.y + "px"; left = param.x + "px"; width = "4px"; height = "4px"; overflow = "hidden"; borderRadius = "4px"; background = fgm.getRanColor(); }; oChip.speedX = fgm.randomRange(-20, 20); oChip.speedY = fgm.randomRange(-20, 20); oFrag.appendChild(oChip); aChip[i] = oChip }; document.body.appendChild(oFrag); timer = setInterval(function () { for (i = 0; i < aChip.length; i++) { var obj = aChip[i]; with (obj.style) { top = obj.offsetTop + obj.speedY + "px"; left = obj.offsetLeft + obj.speedX + "px"; }; obj.speedY++; //判斷煙花爆炸顆粒是否掉落至窗體之外,為真則remove //splice() 方法可刪除從 index 處開(kāi)始的零個(gè)或多個(gè)元素 (obj.offsetTop < 0 || obj.offsetLeft < 0 || obj.offsetTop > document.documentElement.clientHeight || obj.offsetLeft > document.documentElement.clientWidth) && (document.body.removeChild(obj), aChip.splice(i, 1)) }; //判斷煙花爆炸顆粒是否全部remove,為真則clearInterval(timer); !aChip[0] && clearInterval(timer); }, 30) })() } }, 30) } }; fgm.on(window, "load", function () { var oTips = document.getElementById("tips"); var aBtn = oTips.getElementsByTagName("a"); var oFireWorks = new FireWorks(); fgm.on(oTips, "click", function (event) { var oEvent = event || window.event; var oTarget = oEvent.target || oEvent.srcElement; var i = 0; if (oTarget.tagName.toUpperCase() == "A") { for (i = 0; i < aBtn.length; i++) aBtn[i].className = ""; switch (oTarget.id) { case "manual": oFireWorks.type = 1; break; case "auto": oFireWorks.type = 2; break; case "stop": oFireWorks.type = 0; break; } oFireWorks.initialize(); oTarget.className = "active"; //阻止瀏覽器默認(rèn)的事件冒泡行為 oEvent.stopPropagation ? oEvent.stopPropagation() : oEvent.cancelBubble = true } }); }); fgm.on(document, "contextmenu", function (event) { var oEvent = event || window.event; oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false });
關(guān)鍵代碼,滿滿注釋哦,這我可夠意思了哈,不懂的話再私下問(wèn)我吧。
進(jìn)行聲明。3.外部樣式,其中鏈接樣式是使用頻率最高,最實(shí)用的樣式,只需要在之間加上
就可以了。其次就是導(dǎo)入樣式,導(dǎo)入樣式和鏈接樣式比較相似,采用@import樣式導(dǎo)入CSS樣式表,不建議使用。進(jìn)行聲明。3.外部樣式,其中鏈接樣式是使用頻率最高,最實(shí)用的樣式,只需要在之間加上
就可以了。其次就是導(dǎo)入樣式,導(dǎo)入樣式和鏈接樣式比較相似,采用@import樣式導(dǎo)入CSS樣式表,不建議使用。css的全稱是Cascading Style Sheets(層疊樣式表),它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè),還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。