js實(shí)現(xiàn)的彩色方塊飛舞奇幻效果
本文實(shí)例講述了js實(shí)現(xiàn)的彩色方塊飛舞奇幻效果。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } ul { list-style:none; margin:0; padding:0; } li { position:absolute; } #power { font-size:50px; line-height:100px; border:2px solid green; color:green; position:absolute; right:20px; bottom:20px; } </style> </head> <body> <ul id="canvas"></ul> </body> <script type="text/javascript"> var $ = function(id) { return document.getElementById(id); } var $_name = function(tag) { return document.getElementsByTagName(tag); } var color = function() { var _color = "rgb("; _color += Math.round(Math.random()*255); _color += ","; _color += Math.round(Math.random()*255); _color += ","; _color += Math.round(Math.random()*255); _color += ")"; return _color; } var createLi = function(attr) { var ele = document.createElement("li"); ele.style.backgroundColor = attr.bgColor || "black"; ele.style.left = attr.left + "px"; ele.style.top = attr.top + "px"; ele.style.width = ele.style.height = "15px"; ele.onmouseover = function() { var _self = this; var _rotate = 0; if(_self.interval) { clearInterval(_self.interval); _self.style.backgroundColor = _self._backgroundColorBK; } _self._backgroundColorBK = _self.style.backgroundColor; _self.style.backgroundColor = color(); _self.interval = setInterval(function() { _self.style.webkitTransform = "rotate("+_rotate+"deg)"; _rotate += 30; if(_rotate > 360) { clearInterval(_self.interval); _self.onmouseover = null; _self.style.backgroundColor = _self._backgroundColorBK; move(_self); return; } }, 100); } return ele; } var loca = { x: 1000, y: 0 }; var move = function(obj) { var _self = obj; var curX = parseInt(_self.style.left); var curY = parseInt(_self.style.top); var sX = loca.x - curX; var sY = loca.y - curY; var addX = sX/36; var addY = sY/36; var rotate = 0; var backgroundColorBK = _self.style.backgroundColor; _self.interval = setInterval(function() { _self.style.width = _self.style.height = (parseInt(_self.style.height) + 5) + "px"; _self.style.webkitTransform = "rotate("+rotate+"deg)"; curX += addX; curY += addY; _self.style.left = curX + "px"; _self.style.top = curY + "px"; _self.style.backgroundColor = color(); rotate += 10; if(rotate > 360) { _self.style.left = loca.x + "px"; _self.style.top = loca.y + "px"; clearInterval(_self.interval); _self.style.backgroundColor = backgroundColorBK; return; } }, 30); } var init = function() { var ul = $("canvas"); for(var i=50; i<90; i++) { for(var j=50; j<90; j++) { var color = "rgb("+i+","+j+","+Math.round(Math.random()*255)+")"; ul.appendChild(createLi({bgColor: color, left:(j-50)*16 ,top:(i-50)*16})); } } } var main = function() { init(); } main(); </script> </html>
更多關(guān)于js特效相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery動(dòng)畫與特效用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《JavaScript動(dòng)畫特效與技巧匯總》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript+html5 canvas制作的圓中圓效果實(shí)例
- JavaScript+html5 canvas繪制的小人效果
- JavaScript+html5 canvas制作色彩斑斕的正方形效果
- APP中javascript+css3實(shí)現(xiàn)下拉刷新效果
- JavaScript+html5 canvas制作的百花齊放效果完整實(shí)例
- JavaScript+html5 canvas繪制的圓弧蕩秋千效果完整實(shí)例
- 基于javascript實(shí)現(xiàn)圖片左右切換效果
- JavaScript實(shí)現(xiàn)仿淘寶商品購(gòu)買數(shù)量的增減效果
- javascript實(shí)現(xiàn)圖片輪播效果
相關(guān)文章
opencv 識(shí)別微信登錄驗(yàn)證滑動(dòng)塊位置
這篇文章主要介紹了opencv 識(shí)別微信登錄驗(yàn)證滑動(dòng)塊位置及各自的優(yōu)缺點(diǎn),需要的朋友可以參考下2018-08-08jquery和css3中的選擇器nth-child使用方法和用途示例
nth-child(),是CSS3中的一個(gè)偽類選擇符,JQuery選擇器繼承了CSS的部分語法,允許通過標(biāo)簽名、屬性名、內(nèi)容對(duì)DOM元素進(jìn)行快速、準(zhǔn)確的選擇。2023-03-03es6 super關(guān)鍵字的理解與應(yīng)用實(shí)例分析
這篇文章主要介紹了es6 super關(guān)鍵字的理解與應(yīng)用,結(jié)合實(shí)例形式分析了es6 super關(guān)鍵字的功能、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02深入解析JavaScript中函數(shù)的Currying柯里化
這篇文章主要介紹了JavaScript中函數(shù)的Currying柯里化,Currying 的重要意義在于可以把函數(shù)完全變成"接受一個(gè)參數(shù)、返回一個(gè)值"的固定形式,需要的朋友可以參考下2016-03-03js點(diǎn)擊按鈕實(shí)現(xiàn)水波紋效果代碼(CSS3和Canves)
這篇文章主要為大家詳細(xì)介紹了點(diǎn)擊按鈕實(shí)現(xiàn)水波紋效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09JS addEventListener()和attachEvent()方法實(shí)現(xiàn)注冊(cè)事件
這篇文章主要介紹了JS addEventListener()和attachEvent()方法實(shí)現(xiàn)注冊(cè)事件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01淺談javascript中的數(shù)據(jù)類型轉(zhuǎn)換
本文主要對(duì)javascript中的數(shù)據(jù)類型轉(zhuǎn)換進(jìn)行介紹,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2016-12-12