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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
Prototype Hash对象 学习
Jul 19 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
JSON格式化输出
Nov 10 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
2020最新CPU的性能排名
2020/04/02 数码科技
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
用C语言实现文件读写操作
2013/10/27 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
环境建设实施方案
2014/03/14 职场文书
高中生操行评语
2014/04/25 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
资料员岗位职责范本
2015/04/13 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
小学三年级作文之写景
2019/11/05 职场文书