Приводится код двух скриптов для перемещения информационного блока. В первом используется конструктор класса. Второй использует статический класс. Оба скрипта принимают id тэга div или элемента DOM. Для активизации перемещения должен быть задан атрибут позиционирования в абсолютных или относительных координатах. В демонтсрации приведен пример использования второго скрипта, так как он позволяет организовать более сложную траекторию движения.
Скрипт для перемещения div с конструктором класса
Используется метод setInerval. Параметр delay задает задержку для каждого шага. Нет рекурсивного вызова, можно использовать только для перемещения по вертикали и горизонтали.
function div() {
this.t = 0;
this.start = {};
}
div.prototype = {
move: function(typ) {
if (this.end.left == this.start.left) {
var vtop = parseInt(this.elem.style.top);
var vleft = this.start.left;
vtop += this.step;
if (vtop>this.end.top) {
vtop = this.end.top;
this.elem.style.top=parseInt(vtop)+"px";
this.stop();
}
else
this.elem.style.top=parseInt(vtop)+"px";
}
else if (this.end.top == this.start.top) {
var vleft = parseInt(this.elem.style.left);
var vtop = this.start.top;
vleft += this.step;
if (vleft>this.end.left) {
vleft = this.end.left;
this.elem.style.left=parseInt(vleft)+"px";
this.stop();
}
else
this.elem.style.left=parseInt(vleft)+"px";
}
},
go: function(settings){
if (settings.route=="line") {
for(var i in settings){
this[i] = settings[i];
for(var j in settings[i]){
this[i][j]=settings[i][j];
}
}
}
this.elem = (typeof this.id =="string") ? document.getElementById(this.id) : this.id;
var _move = this.Bind(this.move);
var closure = function(index) {
return function() {
_move(index);
}
};
this.t = setInterval(closure(this.route),this.delay);
},
stop:function(){
if (this.t ==0) return;
clearInterval(this.t);
this.t = 0;
},
Bind: function( Method ){
var _this = this;
return(
function(){
return( Method.apply( _this, arguments ) );
}
);
}
}
Скрипт для перемещения div со статическим классом
ИСпользуетс метод setTimeout. Параметр delay задает время для всех шагов в общем.Легко присоединить рекурсивную функцию. Перемещение div производится по горизонтали, вертикали и диагонали.
function $(id) {
var $ = (typeof id =="string") ? document.getElementById(id) : id;
$.move = function(settings,callbk) {
var _this = this;var start ={};
var left = getstyle(_this,"left");
var top = getstyle(_this,"top");
start.left = (left=="auto") ? 0 : parseInt(left);
start.top = (top=="auto") ? 0 : parseInt(top);
if (settings.to.top == start.top) { // x
var descend = (settings.to.left>start.left) ? false : true;
var s = Math.min(start.left,settings.to.left);
var d = Math.max(start.left,settings.to.left);
for (i = s; i <= d; i++) {
(function(j) {
var delay = (descend==true) ? (d-j)*settings.delay/(d - s) : (j-s)*settings.delay/(d - s);
setTimeout(function() {
_this.style.left = j+"px";
if (descend==false&&j==d&&callbk!=undefined) {callbk.call(_this);}
else if (descend==true&&callbk!=undefined&&j==s) {callbk.call(_this);}
},delay);
})(i);
}
}
else if (settings.to.left == start.left) { // y
var descend = (settings.to.top>start.top) ? false : true;
var s = Math.min(start.top,settings.to.top);
var d = Math.max(start.top,settings.to.top);
for (i = s; i <= d; i++) {
(function(j) {
var delay = (descend==true) ? (d-j)*settings.delay/(d - s) : (j-s)*settings.delay/(d - s);
setTimeout(function() {
_this.style.top = j+"px";
if (descend==false&&j==d&&callbk!=undefined) {callbk.call(_this);}
else if (descend==true&&callbk!=undefined&&j==s) {callbk.call(_this);}
},delay);
})(i);
}
}
else {
var descend = (settings.to.left>start.left) ? false : true;
var s = Math.min(start.left,settings.to.left);
var d = Math.max(start.left,settings.to.left);
var k = (settings.to.top - start.top)/(settings.to.left - start.left);
var b = settings.to.top - k*settings.to.left;
for (i = s; i <= d; i++) {
(function(j) {
var delay = (descend==true) ? (d-j)*settings.delay/(d - s) : (j-s)*settings.delay/(d - s);
setTimeout(function() {
_this.style.left = j+"px";
_this.style.top = k*j+b+"px";
if (descend==false&&j==d&&callbk!=undefined) {callbk.call(_this);}
else if (descend==true&&callbk!=undefined&&j==s) {callbk.call(_this);}
},delay);
})(i);
}
}
};
return $;
}
Использование без рекурсивной функции.
Задается время задержки и координата для премещения:
$("box").move({delay:1000,to:{left:0,top:10}});
Использование с рекурсивной функцией.
Рекурсивная функция присоединяется как второй параметр для движения по прямой линии
$("box").move({delay:1000,to:{left:0,top:10}},function(){
$("box").move({delay:1000,to:{left:30,top:400}},function(){
$("box").move({delay:1000,to:{left:300,top:400}});
});
});