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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 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 ctype函数中文翻译和示例
2014/03/21 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
jquery实现加载等待效果示例
2013/09/25 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python如何修改装饰器中参数
2018/03/20 Python
python 获取字符串MD5值方法
2018/05/29 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python实现udp聊天窗口
2020/03/31 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
公司部门司机岗位职责
2014/01/03 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫