Otra versión:
http://www.disegnocentell.com.ar/new...mariposas2.php Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
html {overflow: hidden;}
</style>
<script>
function getWindowData(){
var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
if (typeof window.innerWidth != 'undefined'){
widthViewport= window.innerWidth-17;
heightViewport= window.innerHeight-17;
}else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
widthViewport=document.documentElement.clientWidth;
heightViewport=document.documentElement.clientHeight;
}else{
widthViewport= document.getElementsByTagName('body')[0].clientWidth;
heightViewport=document.getElementsByTagName('body')[0].clientHeight;
}
xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);
heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
}
function rotar(obj,angulo){
if (angulo >= 0) {
var rotation = Math.PI * angulo / 180;
} else {
var rotation = Math.PI * (360+angulo) / 180;
}
var costheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
if (document.createElement("canvas").getContext) {
/* ---- canvas ---- */
if (!obj.imagen) {
var c=document.createElement('canvas');
c.imagen = new Image();
c.imagen.src = obj.src;
} else {
var c=obj;
c.imagen = obj.imagen;
}
c.width = Math.abs(costheta*c.imagen.width) + Math.abs(sintheta*c.imagen.height);
c.height = Math.abs(costheta*c.imagen.height) + Math.abs(sintheta*c.imagen.width);
c.style.position='absolute';
var ctx=c.getContext('2d');
ctx.save();
if (rotation <= Math.PI/2) {
ctx.translate(sintheta*c.imagen.height,0);
} else if (rotation <= Math.PI) {
ctx.translate(c.width,-costheta*c.imagen.height);
} else if (rotation <= 1.5*Math.PI) {
ctx.translate(-costheta*c.imagen.width,c.height);
} else {
ctx.translate(0,-sintheta*c.imagen.width);
}
ctx.rotate(rotation);
ctx.drawImage(c.imagen, 0, 0, c.imagen.width, c.imagen.height);
obj.parentNode.replaceChild(c,obj);
ctx.restore();
}else{
/* ---- DXImageTransform ---- */
obj.style.position='absolute';
obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand') alpha(opacity=100)";
obj.filters.item(0).M11 = costheta;
obj.filters.item(0).M12 = -sintheta;
obj.filters.item(0).M21 = sintheta;
obj.filters.item(0).M22 = costheta;
obj.filters.item(1).opacity=90;
}
}
var c = 0.75;
var k = 0.06;
function mover() {
this.angulo=45 || this.angulo;
this.velocidadx=this.velocidadx || 0;
this.aceleracionx=this.aceleracionx || 0;
this.velocidady=this.velocidady || 0;
this.aceleraciony=this.aceleraciony || 0;
this.xo=this.xo || Math.random()*(getWindowData()[0]-this.childNodes[0].width-10);
this.yo=this.yo || Math.random()*(getWindowData()[1]-this.childNodes[0].height-10);
this._x=this._x || parseInt(this.style.left);
this._y= this._y || parseInt(this.style.top);
this.aceleracionx = this.velocidadx-k*(this._x-this.xo);
this.velocidadx = c*this.aceleracionx;
this._x += this.velocidadx;
this.style.left=this._x+'px';
this.aceleraciony = this.velocidady-k*(this._y-this.yo);
this.velocidady = c*this.aceleraciony;
this._y += this.velocidady;
this.style.top=this._y+'px';
var _this=this;
if (Math.abs(this._x-this.xo)<1 && Math.abs(this._y-this.yo)<1) {
this.xo = Math.random()*(getWindowData()[0]-_this.childNodes[0].width-50);
this.yo = Math.random()*(getWindowData()[1]-_this.childNodes[0].height-50);
}
this.angulo+=Math.atan(this.velocidady/this.velocidadx)*180/Math.PI;
rotar(_this.childNodes[0],_this.angulo);
setTimeout(function(){mover.call(_this);},15);
}
onload=function(){
setTimeout(function(){mover.call(document.getElementById('contenedor0'));},15);
setTimeout(function(){mover.call(document.getElementById('contenedor1'));},15);
setTimeout(function(){mover.call(document.getElementById('contenedor2'));},15);
setTimeout(function(){mover.call(document.getElementById('contenedor3'));},15);
setTimeout(function(){mover.call(document.getElementById('contenedor4'));},15);
setTimeout(function(){mover.call(document.getElementById('contenedor5'));},15);
}
</script>
</head>
<body>
<div id="contenedor0" style="position:absolute; top:1px; left:-1500px;"><img src="1843.png" width="32" height="32" /></div>
<div id="contenedor1" style="position:absolute; top:1px; left:-1500px;"><img src="1843.png" width="32" height="32" /></div>
<div id="contenedor2" style="position:absolute; top:1px; left:-1500px;"><img src="1843.png" width="32" height="32" /></div>
<div id="contenedor3" style="position:absolute; top:1px; left:-1500px;"><img src="1843.png" width="32" height="32" /></div>
<div id="contenedor4" style="position:absolute; top:1px; left:-1500px;"><img src="1843.png" width="32" height="32" /></div>
<div id="contenedor5" style="position:absolute; top:1px; left:-1500px;"><img src="1843.png" width="32" height="32" /></div>
</body>
</html>