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


Posted in Javascript onJanuary 27, 2016

本文实例讲述了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>

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

Javascript 相关文章推荐
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
javascript常用对话框小集
Sep 13 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 #Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 #Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 #Javascript
js实现简单排列组合的方法
Jan 27 #Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 #Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 #Javascript
jQuery ajax分页插件实例代码
Jan 27 #Javascript
You might like
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python使用type动态创建类操作示例
2020/02/29 Python
外贸业务员的岗位职责
2013/11/23 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
二年级数学教学反思
2014/01/21 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
授权委托书范本
2014/04/03 职场文书
端午节演讲稿
2014/05/23 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
四年级学生期末评语
2014/12/26 职场文书