html自动滚动位置,javascript – 根据鼠标位置自动滚动div

一种略微不同的方式来实现您的需求：

jQuery(function($) {

$(window).load(function() {

var $gal = $("#propertyThumbnails"),

galW = $gal.outerWidth(true),

galSW = $gal[0].scrollWidth,

wDiff = (galSW / galW) - 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 = galW - (mPadd * 2), // The mousemove available area

mmAAr = (galW / mmAA); // get available mousemove fidderence ratio

$gal.mousemove(function(e) {

mX = e.pageX - $(this).offset().left;

mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;

});

setInterval(function() {

posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"

$gal.scrollLeft(posX * wDiff);

}, 10);

});

});

#parent {

position: relative;

margin: 0 auto;

width: 60%;

height: 260px;

}

#propertyThumbnails {

position: relative;

overflow: hidden;

background: #444;

width: 100%;

height: 262px;

white-space: nowrap;

}

#propertyThumbnails img {

vertical-align: middle;

height: 100%;

display: inline;

margin-left: -4px;

}

其中mPadd是区域(在PX中,在左右边界区域),没有任何敏感性,以防止用户挫折:)