网络编程

js实现的彩色方块飞舞奇幻效果
网络编程 2025/8/24 佚名
3 2

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

运行效果截图如下：

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程序设计有所帮助。

标签：
js,彩色方块,飞舞,效果
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“js实现的彩色方块飞舞奇幻效果”

暂无“js实现的彩色方块飞舞奇幻效果”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com