Hogyan lehet dobozt mozgatni?

function element(id,parameters,text,color){

this.stuff = document.getElementById(id);

this.framepersec = 30;

this.animations = 0;

this.speedfactor = 0;

this.speedtest;

this.speedtest_start;

this.speedtest_end;

this.id = id;

this.update = 0;

this.color = color;

this.text = text;

this.setPosition = setPosition;

this.setTop = setTop;

this.setBottom = setBottom;

this.setLeft = setLeft;

this.setRight = setRight;

this.setWidth = setWidth;

this.setHeight = setHeight;

this.setDegree = setDegree;

this.setOpacity = setOpacity;

this.setShadow = setShadow;

this.setRY = setRY;

this.transform = transform;

var self = this;

if(parameters != undefined)

{

var array = parameters.split(";");

var i = 0;

for(i=0;i < array.length;i++){

var value = array[i].split(":");

switch(value[0]){

case "position": self.setPosition(value[1]); break;

case "top": self.setTop(value[1]); break;

case "bottom": self.setBottom(value[1]); break;

case "left": self.setLeft(value[1]); break;

case "right": self.setRight(value[1]); break;

case "width": self.setWidth(value[1]); break;

case "height": self.setHeight(value[1]); break;

case "degree": self.setDegree(value[1]); break;

case "opacity": self.setOpacity(value[1]); break;

case "ry": self.setRY(value[1]); break;

case "shadow": self.setShadow(value[1],self.color);

}

}

}

/*functions*/

function setPosition(position){

self.position = position;

document.getElementById(id).style.position = self.position;

}

function setTop(top){

self.top = top;

document.getElementById(id).style.top = Math.round(self.top)+"px";

return(self.top);

}

function setBottom(bottom){

self.bottom = bottom;

document.getElementById(id).style.bottom = Math.round(self.bottom)+"px";

return(self.bottom);

}

function setLeft(left){

self.left = left;

document.getElementById(id).style.left = Math.round(self.left)+"px";

return(self.left);

}

function setRight(right){

self.right = right;

document.getElementById(id).style.right = Math.round(self.right)+"px";

return(self.right);

}

function setWidth(width){

self.width = width;

document.getElementById(id).style.width = Math.round(self.width)+"px";

return(self.width);

}

function setHeight(height){

self.height = height;

document.getElementById(id).style.height = Math.round(self.height)+"px";

return(self.height);

}

function setDegree(degree){

self.degree = degree;

document.getElementById(id).style.webkitTransform="rotate("+roundNumber(self.degree,1)+"deg)";

document.getElementById(id).style.msTransform="rotate("+roundNumber(self.degree,1)+"deg)";

document.getElementById(id).style.MozTransform="rotate("+roundNumber(self.degree,1)+"deg)";

document.getElementById(id).style.OTransform="rotate("+roundNumber(self.degree,1)+"deg)";

document.getElementById(id).style.transform="rotate("+roundNumber(self.degree,1)+"deg)";

return(self.degree);

}

function setOpacity(opacity){

if(opacity == 0) {document.getElementById(id).style.visibility = "hidden";}

else if(self.opacity == 0) {document.getElementById(id).style.visibility = "visible";}

self.opacity = roundNumber(opacity,3);

try{

document.getElementById(id).style.opacity = self.opacity;

}

catch (err){

document.getElementById(id).style.filter = 'alpha(opacity='+(self.opacity*1000)+')';

}

return(self.opacity);

}

function setShadow(shadow){

self.shadow = shadow;

document.getElementById(id).style.boxShadow = self.shadow+'px '+self.shadow+'px '+Math.round(self.shadow)+'px '+self.color;

return(self.shadow);

}

/* SVG functions */

function setRY(ry){

self.ry = ry;

document.getElementById(id).setAttribute('ry',ry);

return(self.ry);

}

function transform(parameters,sec,nextObject){

var way = "linear";

if(sec == undefined){sec = 0;}

self.update++;

var transform_number = self.update;

var parameters = parameters.split(";");

var i = 0;

var functions = new Array;

var value = new Array();

for(i=0;i < parameters.length;i++){

value[i] = parameters[i].split(":");

switch(value[i][0]){

case "top": if(self.top == undefined) {self.top = 0;} value[i][0] = self.top; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setTop; break;

case "bottom": if(self.bottom == undefined) {self.bottom = 0;} value[i][0] = self.bottom; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setBottom; break;

case "left": if(self.left == undefined) {self.left = 0;} value[i][0] = self.left; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setLeft; break;

case "right": if(self.right == undefined) {self.right = 0;} value[i][0] = self.right; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setRight; break;

case "width": if(self.width == undefined) {self.width = 0;} value[i][0] = self.width; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setWidth; break;

case "height": if(self.height == undefined) {self.height = 0;} value[i][0] = self.height; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setHeight; break;

case "degree": if(self.degree == undefined) {self.degree = 0;} value[i][0] = self.degree; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setDegree; break;

case "opacity": if(self.opacity == undefined) {self.opacity = 1;} value[i][0] = self.opacity; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setOpacity; break;

case "shadow": if(self.shadow == undefined) {self.shadow = 0;} value[i][0] = self.shadow; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setShadow; break;

case "ry": if(self.ry == undefined) {self.ry = 0;} value[i][0] = self.ry; value[i][2] = (value[i][0] - value[i][1])/(self.framepersec*sec); functions[i] = self.setRY; break;

case "position": if(self.position == undefined) {self.position = "inherit"} else{self.position = value[i][1]; document.getElementById('self.id').style.position = value[i][1];} break;

}

}

self.speedtest = new Date();

self.speedtest_start = self.speedtest.getTime();

var doit = setInterval(

function(){

for(j=0;j<functions.length;j++){

if(way == "linear"){

if(Math.abs(value[j][0]-value[j][1]) > Math.abs(value[j][2])){

value[j][0] = functions[j](value[j][0] - value[j][2]);

}

else {

value[j][0] = functions[j](value[j][1]);

value.splice(j,1);

functions.splice(j,1);

}

}

}

if(functions.length < 1){

self.animations++;

self.speedtest = new Date();

self.speedtest_end = self.speedtest.getTime();

self.speedfactor += (sec*1000)/(self.speedtest_end - self.speedtest_start);

if (self.speedfactor/self.animations < 0.5){self.framepersec = 10;}

else if (self.speedfactor/self.animations < 0.7){self.framepersec = 20;}

else if (self.speedfactor/self.animations < 0.8){self.framepersec = 30;}

else if (self.speedfactor/self.animations < 0.9){self.framepersec = 40;}

else {self.framepersec = 50;}

/* document.getElementById("fps").innerHTML = self.framepersec+" képkocka/másodperc"; */

if (nextObject != undefined && self.update == transform_number) {nextObject();}

clearInterval(doit);

}

else if(transform_number < self.update){

clearInterval(doit);

}

},Math.ceil(1000/self.framepersec)

)

}

}

használata:

var doboz = new element('doboz id-je');

utána:

doboz.transform(parameter,sec);

parameter = 'left:50;top:30;' stb (pixelben)

sec = 20 (ennyi másodperc alatt végzi el a mozgást)

PEdig a js-ben az a jó hogy

"Note: This example does not work in Internet Explorer 9 and earlier versions."

Ez nem igaz rá. :)