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

前端技术 2023/09/05 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/12734

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案