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 相关文章推荐
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
Javascript实现动态时钟效果
Nov 17 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
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编程中10个最常见的错误
2014/08/08 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python2.7实现邮件发送功能
2018/12/12 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python中get和post有什么区别
2020/06/19 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
生物制药专业自我鉴定
2014/02/19 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
python的变量和简单数字类型详解
2021/09/15 Python
Oracle 死锁的检测查询及处理
2021/09/25 Oracle