js實現的彩色方塊飛舞奇幻效果_javascript技巧
- WBOY原創
- 2016-05-16 15:17:471417瀏覽
本文實例講述了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程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn