0
我已經制作了這個小腳本。它工作得很好,直到內容太多。列表平移功能
有了這個:http://jsbin.com/axewuf/3
唯一的區別是內容。 第一個例子是像它應該那樣工作,但由於某些原因,當第二個例子中的內容太多時,腳本不能像它應該那樣工作。
有一些我錯過了。您應該能夠將鼠標一直拖動到列表的末尾,但在到達之前,鼠標會到達屏幕的末端。 我想我需要在屏幕的高度,但我不知道如何。
任何人都可以弄明白嗎?
我已經制作了這個小腳本。它工作得很好,直到內容太多。列表平移功能
有了這個:http://jsbin.com/axewuf/3
唯一的區別是內容。 第一個例子是像它應該那樣工作,但由於某些原因,當第二個例子中的內容太多時,腳本不能像它應該那樣工作。
有一些我錯過了。您應該能夠將鼠標一直拖動到列表的末尾,但在到達之前,鼠標會到達屏幕的末端。 我想我需要在屏幕的高度,但我不知道如何。
任何人都可以弄明白嗎?
解決方案是分離代碼。一種用於當內容高度低於窗口高度時,另一種用於高度。
這並不完美,但它似乎工作。
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 });
});