js实现的彩色方块飞舞奇幻效果

2019-11-20 10:40:45

字体：大中小

来源：转载

供稿：网友

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

运行效果截图如下：

具体代码如下：

<!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>

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》、《jQuery常见经典特效汇总》及《JavaScript动画特效与技巧汇总》

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

上一篇：jQuery+css实现的换页标签栏效果

下一篇：JavaScript下的时间格式处理函数Date.prototype.format