实现表单横向滑动的效果

.thumbs-block {
	 position:relative; /**/
	 overflow: hidden;
	 background: #ccc;
	 margin: 0 5px;
	 width: 714px;
	 height:142px;      /**/
} 

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。

$(function(){
	var	$bl = $(".thumbs-block"),
	    $th = $(".thumbs"),
	    blW = $bl.outerWidth(), //返回第一个匹配元素的外部宽度，也就是最大的DIV的长度
	    blSW = $bl[0].scrollWidth,//scrollWidth`值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度
	    wDiff = (blSW/blW)-1,  // widths difference ratio
	    mPadd = 60, // Mousemove Padding
	    damp = 20, // Mousemove response softness
	    mX = 0, // Real mouse position
	    mX2 = 0, // Modified mouse position
	    posX = 0,
	    mmAA = blW-(mPadd*2), // The mousemove available area
	    mmAAr = (blW/mmAA);    // get available mousemove fidderence ratio
	
		$bl.mousemove(function(e) {
	        mX = e.pageX - this.offsetLeft;
	        mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
		});
	
		setInterval(function(){
			posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"	
			$th.css({marginLeft: -posX*wDiff });
		}, 10);
	
});

	<div class="thumbs-block">
		    <div class="thumbs">
		     	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=1" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=2" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=3" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=4" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=5" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=6" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=7" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=8" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=9" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=10" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=11" width="120" height="120" /></a>
				<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=12" width="120" height="120" /></a>
		    </div>
		</div>

js方法中的outerWidth()是返回第一个匹配元素的外部宽度，也就是最大的DIV的长度。

---

Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。 它还可以包括伪元素的宽度，例如::before或::after。 如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth

---

mousemove事件：