voxpelli · October 8, 2010 07:45
diff --git a/SimpleJQueryMousemoveScroll.html b/SimpleJQueryMousemoveScroll.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html>
 	<head>
 		<title></title>
 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 		<style>
 			ul {
 				overflow: hidden;
 				width: 150px;
 				height: 70px;
 				padding: 0;
 				list-style: none;
 				margin: 0;
 			}
 			li {
 				float: left;
 				background: magenta;
 				border: 1px solid black;
 				width: 48px;
 				height: 68px;
 			}
 		</style>
 	</head>
 	<body>
 		<ul>
 			<li>1</li>
 			<li>2</li>
 			<li>3</li>
 			<li>4</li>
 			<li>5</li>
 			<li>6</li>
 			<li>7</li>
 			<li>8</li>
 			<li>9</li>
 		</ul>
 		<script>
 		(function () {
 			// This is a quick hack - the coding style is bad - I know - sorry
 			var width = 0;
 			var ul = $('ul').children().each(function () {
 				width += $(this).outerWidth();
 			}).end();
 			var containerWidth = ul.width();
 			ul.wrap($('<div>').css({
 				width : containerWidth,
 				height : ul.height(),
 				overflow : 'hidden',
 				position : 'relative'
 			}));
 			ul.width(width).css({position : 'absolute', left : 0});
 			var animate = function () {
 				var left = Math.abs(parseFloat(ul.css('left')));
 				if (left > (width - containerWidth) / 2) {
 					target = 0;
 				}
 				else {
 					target = (width - containerWidth);
 				}
 				ul.animate({left: 0 - target}, Math.abs(left - target) / containerWidth * 6000, 'linear', animate);
 			};
 			animate();
 			ul.parent().mousemove(function (e) {
 				ul.stop(true);
 				var offset = $(this).offset();
 				var margin = 10;
 				ul.css('left', 0 - (Math.min(1, Math.max(e.pageX - offset.left - margin, 0) / (containerWidth - 1 - margin * 2))) * (width - containerWidth));
 			}).mouseout(animate);
 		}());
 		</script>
 	</body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
	<html>
	<head>
	<title></title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<style>
	ul {
	overflow: hidden;
	width: 150px;
	height: 70px;
	padding: 0;
	list-style: none;
	margin: 0;
	}
	li {
	float: left;
	background: magenta;
	border: 1px solid black;
	width: 48px;
	height: 68px;
	}
	</style>
	</head>
	<body>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	</ul>
	<script>
	(function () {
	// This is a quick hack - the coding style is bad - I know - sorry
	var width = 0;
	var ul = $('ul').children().each(function () {
	width += $(this).outerWidth();
	}).end();
	var containerWidth = ul.width();
	ul.wrap($('<div>').css({
	width : containerWidth,
	height : ul.height(),
	overflow : 'hidden',
	position : 'relative'
	}));
	ul.width(width).css({position : 'absolute', left : 0});
	var animate = function () {
	var left = Math.abs(parseFloat(ul.css('left')));
	if (left > (width - containerWidth) / 2) {
	target = 0;
	}
	else {
	target = (width - containerWidth);
	}
	ul.animate({left: 0 - target}, Math.abs(left - target) / containerWidth * 6000, 'linear', animate);
	};
	animate();
	ul.parent().mousemove(function (e) {
	ul.stop(true);
	var offset = $(this).offset();
	var margin = 10;
	ul.css('left', 0 - (Math.min(1, Math.max(e.pageX - offset.left - margin, 0) / (containerWidth - 1 - margin * 2))) * (width - containerWidth));
	}).mouseout(animate);
	}());
	</script>
	</body>
	</html>