html做彩色方格,js实现的彩色方块飞舞奇幻效果
本文实例讲述了js实现的彩色方块飞舞奇幻效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
demo
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;
}
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();
希望本文所述对大家JavaScript程序设计有所帮助。
html做彩色方格,js实现的彩色方块飞舞奇幻效果相关推荐
- JS C22作业:方块拖拽效果
(1)鼠标移动 document.onmousemove = function(e){var event = e || window.event;console.log(e.pageX + " ...
- 32位真彩色与24位真彩色区别
真彩色是指图像中的每个像素值都分成R.G.B三个基色分量,每个基色分量直接决定其基色的强度,这样产生的色彩称为真彩色.真彩色图像是一种用三个或更多字节描述像素的计算机图像存储方式. 真彩色-表示方法 ...
- 32位全彩色与24位全彩色有啥区别
真彩色是指图像中的每个像素值都分成R.G.B三个基色分量,每个基色分量直接决定其基色的强度,这样产生的色彩称为真彩色.真彩色图像是一种用三个或更多字节描述像素的计算机图像存储方式. 计算 ...
- 微信朋友圈+html+字体颜色,微信新功能 酷炫的彩色微信名字 朋友圈彩色昵称设置方法...
原标题:微信新功能 酷炫的彩色微信名字 朋友圈彩色昵称设置方法 这几天有几位微民们问小编,说看到朋友的微信昵称变成了彩色字体,好奇这怎么回事,觉得非常好玩,那怎样才可以设置彩色字体呢? 希望小编能教大 ...
- html代码特效粒子,html5彩色方块粒子动画效果代码
特效描述:html5 彩色方块 粒子动画效果.粒子动画 代码结构 1. HTML代码 var df = document.createDocumentFragment(); var container ...
- Fort.js – 时尚、现代的进度提示效果
Fort.js 是表单填写进度提示效果的 JavaScript 库,使用非常简单. 提供了Default.Gradient.Sections 以及 Flash 四种效果 用Fort.js很简单,很简单 ...
- html点击图片弹出模态框,JS实现图片点击后出现模态框效果
JS实现图片点击后出现模态框效果 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了JS实现图片点击后出现模态框效果,编程之家小编觉得挺不错的 ...
- html选项卡切换代码,js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 无标题文档 body,ul,li{marg ...
- 帆软JS图标实现自动炫酷滚动效果
其实在大项目中,多多少少都会接触到一些分析页面啊,什么报表啊等等,在这里我可以给大家推荐一下FineReport这个软件,对于刚出道的小白来说多少会有点迷茫,在迷茫中一时找不到对的方向.我也是一样.我 ...
最新文章
- grub legacy
- 教你使用IOS内置的排错命令
- 【bzoj5100】[POI2018]Plan metra 构造
- 开发工评价程师自我_常见“自我评价”写作范例
- 深入探究JVM | klass-oop对象模型研究
- 排序算法:冒泡排序算法优化实现及分析
- 从“小众”到“首选”,推动云原生产业落地华为云作用几何?
- C++两个函数可以相互递归吗_C语言“最难啃”的三块硬骨头!你知道吗?
- 【运维安全】Apache 服务器存在高危提权漏洞,请升级至最新版本 2.4.39
- php 智能输入提示插件,PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能_PHP...
- 【SORT系列】SIMPLE ONLINE AND REALTIME TRACKING
- Nginx和FastDfs完整配置过程
- fudanNLP-使用
- GDAL集成GEOS编译笔记
- mysql按照音序排列_如何按音序排列
- C#基础代码笔记(四)
- Exception in thread “main“ java.io.NotSerializableException:
- 数据库原理概论理论知识点总结
- word公式编号及交叉引用技巧
- python中的除法、取整和求模_python中的除法,取整和求模-Go语言中文社区