<script src="http://static.tumblr.com/gydnqyv/8Inmucmv6/jquery.easing.1.3.js" type="text/javascript"></script>
<script>
$(window).load(function() {
$outer_container=$("#outer_container");
$imagePan_panning=$("#imagePan .panning");
$imagePan=$("#imagePan");
$imagePan_container=$("#imagePan .container");
$imagePan_panning.css("margin-top",($imagePan.height()-$imagePan_panning.height())/2+"px");
containerWidth=$imagePan.width();
containerHeight=$imagePan.height();
totalContentW=$imagePan_panning.width();
totalContentH=$imagePan_panning.height();
$imagePan_container.css("width",totalContentW).css("height",totalContentH);
function MouseMove(e){
var mouseCoordsX=(e.pageX - $imagePan.offset().left);
var mouseCoordsY=(e.pageY - $imagePan.offset().top);
var mousePercentX=mouseCoordsX/containerWidth;
var mousePercentY=mouseCoordsY/containerHeight;
var destX=-(((totalContentW-(containerWidth))-containerWidth)*(mousePercentX));
var destY=-(((totalContentH-(containerHeight))-containerHeight)*(mousePercentY));
var thePosA=mouseCoordsX-destX;
var thePosB=destX-mouseCoordsX;
var thePosC=mouseCoordsY-destY;
var thePosD=destY-mouseCoordsY;
var marginL=$imagePan_panning.css("marginLeft").replace("px", "");
var marginT=$imagePan_panning.css("marginTop").replace("px", "");
var animSpeed=500; //ease amount
var easeType="easeOutCirc";
if(mouseCoordsX>destX || mouseCoordsY>destY){
//$imagePan_container.css("left",-thePosA-marginL); $imagePan_container.css("top",-thePosC-marginT); //without easing
$imagePan_container.stop().animate({left: -thePosA-marginL, top: -thePosC-marginT}, animSpeed,easeType); //with easing
} else if(mouseCoordsX<destX || mouseCoordsY<destY){
//$imagePan_container.css("left",thePosB-marginL); $imagePan_container.css("top",thePosD-marginT); //without easing
$imagePan_container.stop().animate({left: thePosB-marginL, top: thePosD-marginT}, animSpeed,easeType); //with easing
} else {
$imagePan_container.stop();
}
}
$imagePan_panning.css("margin-left",($imagePan.width()-$imagePan_panning.width())/2).css("margin-top",($imagePan.height()-$imagePan_panning.height())/2);
$imagePan.bind("mousemove", function(event){
MouseMove(event);
});
});
$(window).resize(function() {
$imagePan.unbind("mousemove");
$imagePan_container.css("top",0).css("left",0);
$(window).load();
});
</script>
