|
这篇文章主要介绍了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程序设计有所帮助。 | 
发表于 2016-1-27 10:50:01
