Mousemove pan

scrollcss.css

#scrollingWrapper{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
}
#scrollingWrapper li {
	height: 50px;
	display:block;
	line-height:50px;
	font: sans-serif;
	color: #00853F;
}
#scrollingWrapper li a {
	font-family: sans-serif;
	color: #00853F;
	display: block;
	height: 100%;
	line-height: 50px;
	padding: 0 10px;
	border-bottom: 1px solid #CCC;
}

#scroller{
	position:relative;
	height:200px;
	width:300px;
	overflow:hidden;
	border:1px solid red;    
}

scrollhtml.snippet

<div id="scroller">
	<ul id="scrollingWrapper" class="external">
		<li><a href="#item1">Item 1</a></li>
		<li><a href="#item2">Item 2</a></li>
		<li><a href="#item3">Item 3</a></li>
		<li><a href="#item4">Item 4</a></li>
		<li><a href="#item5">Item 5</a></li>
		<li><a href="#item6">Item 6</a></li>
		<li><a href="#item7">Item 7</a></li>
		<li><a href="#item8">Item 8</a></li>
		<li><a href="#item9">Item 9</a></li>
	</ul>
</div>

scrolljs.js

var $imgWrap = $('#scrollingWrapper'), 
	$scroller = $("#scroller"),
	divHeight,
	divWidth,
	wrapHeight,
	wrapWidth,
	heightPercent,
	widthPercent;

$(window).load( function(){
	divHeight = $scroller.height();
	divWidth = $scroller.width();
	wrapHeight = $imgWrap.height();
	wrapWidth = $imgWrap.width();
	heightPercent = (wrapHeight - divHeight) / divHeight;
	widthPercent = (wrapWidth - divWidth) / divWidth;


	$imgWrap.mousemove( function(e){
		var x = e.pageX - $(this).offset().top;
		var y = e.pageY - $(this).offset().left;

		y = y * heightPercent ;
		x = x * widthPercent ;

		$(this).stop().animate({top : -y},5)
	});

});