html做彩色方格,js实现的彩色方块飞舞奇幻效果

本文实例讲述了js实现的彩色方块飞舞奇幻效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

demo

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;

}

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();

希望本文所述对大家JavaScript程序设计有所帮助。