js实现的彩色方块飞舞奇幻效果
更新时间：2016年01月27日 10:50:01 作者：m1870164
这篇文章主要介绍了js实现的彩色方块飞舞奇幻效果,涉及JavaScript响应鼠标事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下
本文实例讲述了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>
更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》、《jQuery常见经典特效汇总》及《JavaScript动画特效与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
本文为大家介绍下使用js仿新浪微博登陆邮箱提示效果，具体实现代码如下，感兴趣的朋友可以参考下，希望对大家有所帮组2013-08-08
浏览器出于安全和隐私的考虑,限制了用代码将网页加入浏览器的收藏夹,本文主要介绍了如何使用通过一些间接的方法实现这一功能,有需要的可以参考下2024-10-10
javascript HTML5 Canvas实现圆盘抽奖功能
这篇文章主要为大家详细介绍了javascript HTML5 Canvas实现圆盘抽奖功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了JavaScript中作用域链的概念及用途讲解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要为大家详细介绍了js利用拖放实现添加删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
js常用排序，整理了，常用的数组互换。2010-12-12
这篇文章主要为大家详细介绍了微信小程序实现多文件或者图片上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了小程序开发经验：多页面数据同步，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
在js中,正则表达式是由一个RegExp对象表示的，RegExp 是正则表达式的缩写。RegExp简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。可以使用一个RegExp()构造函数来创建RegExp对象，也可以使用直接量语法2015-11-11
预加载的好处可以让网页更快的呈现给用户，缺点就是可能会增加无用的请求，不多说了，作为一个前端攻城师都懂的，下面分享我做的测试和得到的结果2013-10-10
最新评论