2013-06-18 31 views
0

我已经制作了这个小脚本。它工作得很好,直到内容太多。列表平移功能

比较:http://jsbin.com/axewuf/1

有了这个:http://jsbin.com/axewuf/3

唯一的区别是内容。 第一个例子是像它应该那样工作,但由于某些原因,当第二个例子中的内容太多时,脚本不能像它应该那样工作。

有一些我错过了。您应该能够将鼠标一直拖动到列表的末尾,但在到达之前,鼠标会到达屏幕的末端。 我想我需要在屏幕的高度,但我不知道如何。

任何人都可以弄明白吗?

回答

0

解决方案是分离代码。一种用于当内容高度低于窗口高度时,另一种用于高度。
这并不完美,但它似乎工作。

var container = jQuery('.container'); 
var object = jQuery('.object', container); 
var containerHeight, containerOffsetTop, 
    objectHeight, objectNegativeMargin, objectOffsetTop, 
    heightPercent, objectMargin, mouseY; 

object.mousemove(function(e){ 
    containerHeight = container.height(); 
    containerOffsetTop = container.offset().top; 
    objectHeight = object.height(); 
    objectNegativeMargin = (objectHeight/2); 
    objectOffsetTop = object.offset().top; 

    if(objectHeight > containerHeight) { 
     heightPercent = (e.pageY - containerOffsetTop)/containerHeight; 
     objectMargin = -(heightPercent * (objectHeight-containerHeight)); 
    } else { 
     mouseY = e.pageY - objectNegativeMargin; 
     objectMargin = (objectOffsetTop - mouseY)/2; 
    }     

    object.css({ marginTop : objectMargin }); 
});