jQuery horizontal scroll on hover

by Elvis Sedić

HTML

<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>

CSS

.thumbs-block {
    position:relative; /**/
    overflow: hidden;
    background: #ccc;
    margin: 0 5px;
    width: 714px;
    height:142px;      /**/
} 
.thumbs-block .thumbs {
    white-space: nowrap;
    text-align: center;
}
.thumbs-block .thumb {
    display: inline-block;
    padding: 5px;
    margin: 5px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.3);
    height: 120px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.thumbs{
  position:absolute;  /**/
  margin-left:0;      /**/
}

JavaScript

var $bl    = $(".thumbs-block"),
        $th    = $(".thumbs"),
        blW    = $bl.outerWidth(),
        blSW   = $bl[0].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);