Создадим эффект, напоминающий «Лебедевский» на сайте http://www.mosgorreklama.ru . В отличии от него будем перемещать не слой внутри другого слоя, а фон. На основе этого эффекта можно собрать оригинальный фотоальбом, в котором большие картинки будут прокручиваться внутри маленькой области.
Как всегда, скрипт требует фреймворка JQuery
<script language="javascript" type="text/javascript">
// background
var x = 0;
var y = 0;
// mouse
var mx = 0;
var my = 0;
var timer;
// размеры контейнера
var h = 0;
var w = 0;
// размеры картинки
var width = 747;
var height = 880;
var drag = 0;
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) && navigator.platform == "Win32";
$(document).ready(
function() {
preventSelection(document);
bindMoving('moveLeft',-30,0,25);
bindMoving('moveRight',30,0,25);
bindMoving('moveUp',0,-20,25);
bindMoving('moveDown',0,20,25);
$('#tdContainer').get(0).onmousemove = mouse;
$('#tdContainer').get(0).onmousedown = function() {drag = 1;}
$('#tdContainer').get(0).onmouseup = function() {drag = 0;}
$('#tdContainer').get(0).ondrag = function() {return false}
$('#tdContainer').get(0).ondragstart = function() {return false}
}
);
function bindMoving(id,dx,dy,interval) {
$('#'+id).get(0).onmouseover = function() {
if (supported) {
timer = setTimeout(function() {moveBy([dx,dy,interval])}, interval);
} else {
timer = setTimeout(moveBy, interval, [dx,dy,interval]);
}
}
$('#'+id).get(0).onmouseout = function() {
clearTimeout(timer);
}
}
function moveBy(par) {
var dx = par[0];
var dy = par[1];
var interval = par[2];
var fade = par[3];
//alert('x='+dx+' y='+dy+' i='+interval);
x = x + dx;
y = y + dy;
if(x > width) x = x - width+1;
if(x < 0) x = x + width-1;
if(y > height) y = y - height+1;
if(y < 0) y = y + height-1;
$('#tdContainer').css('backgroundPosition', x+'px '+y+'px');
if (interval)
if (supported) {
timer = setTimeout(function() {moveBy([dx,dy,interval])}, interval);
} else {
timer = setTimeout(moveBy, interval,[dx,dy,interval]);
}
}
function mouse(e) {
var x = 0, y = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
} else if (e.clientX || e.clientY) {
x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
if (drag)
moveBy([x-mx,y-my,0]);mx = x;
my = y;
return {"x":x, "y":y};
}
</script>
<div style="background:url(/portfolio/1.jpg) repeat 0px 0px; width:400px; height:300px;" id="tdContainer'">
<a id="moveUp" href="javascript:void(0)">Up</a>
<a id="moveDown" href="javascript:void(0)">Down</a>
<a id="moveRight" href="javascript:void(0)">Right</a>
<a id="moveLeft" href="javascript:void(0)">Left</a>
</div>