Question

我试图制作一条＆＃34;线＆＃34;图像拇指，它在mousemove上滚动。我得到了它的工作，但我现在的问题是，我想做一个＆＃34; padding＆＃34;在侧面，所以我不必将鼠标一直向两侧看到第一个/最后一个拇指。但我真的无法让它发挥作用：/

这是我现在的脚本：

// MouseMove scrolling on thumbs
var box = $('.thumbs-block'),
    innerBox = $('.thumbs'),
    lastElement = innerBox.find('a:last-child');

var offsetPx = 100;
var boxOffset = box.offset().left;

var boxWidth = box.width() /* - (offsetPx*2)*/;
var innerBoxWidth = (lastElement[0].offsetLeft + lastElement.outerWidth(true)) - boxOffset /* + (offsetPx*2)*/;

scrollDelayTimer = null;
box.mousemove(function (e) {
    console.log('boxWidth: ' + boxWidth + '   innerBoxWidth: ' + innerBoxWidth + '   box.scrollLeft(): ' + box.scrollLeft());

    var mouseX = e.pageX;
    var boxMouseX = mouseX - boxOffset;

    if ((boxMouseX > offsetPx) && (boxMouseX < (boxWidth - offsetPx))) {
        var left = (boxMouseX * (innerBoxWidth - boxWidth) / boxWidth) /* - offsetPx*/;

        clearTimeout(scrollDelayTimer);
        scrollDelayTimer = setTimeout(function () {
            scrollDelayTimer = null;
            box.stop().animate({
                "scrollLeft": left
            }, {
                queue: false,
                duration: 500,
                easing: 'linear'
            });
        }, 10);
    }
});

有些地方我尝试添加偏移量（内联注释掉），其中一些让它在一端工作而不是另一端：/

我很确定这是数学方面的问题，但我无法弄清楚我应该做些什么：/

这里是一个jsFiddle：http://jsfiddle.net/6CJfs/1/

我希望我的问题足够清楚，不知道如何解释，并希望有人可以提供帮助：）

Answer 1

你的剧本不顺畅，所以我完全修改了（抱歉:)
用一个非常简单的方法：

的 LIVE DEMO

超级简单的jQ：

$(function(){ 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); });

添加到CSS：

.thumbs-block { position:relative; /* THIS LINE */ overflow: hidden; background: #ccc; margin: 0 5px; width: 714px; height:142px; /* THIS LINE */ } .thumbs{ /* ALL */ position:absolute; margin-left:0; /* WILL BE CONTROLLED BY jQ */ }

Answer 2

var $imgWrapper = $(".js-img-wrapper");
var $imgInnerWrapper;
var elementLength = 0;
var width = 0;
var elementRangeWidth = 0;
var saveShowedNumberOfElement = 1;

$imgWrapper.on("mouseenter", function() {
    $imgInnerWrapper = $(this).find(".js-img-inner");
    elementLength = $imgInnerWrapper.children().length;
    width = $(this).outerWidth();
    elementRangeWidth = width / elementLength;
}).on("mousemove", function(e) {
    var mousePosition = e.pageX - $(this).offset().left;
    if (mousePosition > 0 && mousePosition <= width) {
        var showedNumberOfElement = Math.ceil(mousePosition / elementRangeWidth);

        if (saveShowedNumberOfElement !== showedNumberOfElement) {
            saveShowedNumberOfElement = showedNumberOfElement;
            var imagePositionOffset = -width * (showedNumberOfElement - 1);
            $imgInnerWrapper.css({
                transform: "translateX("+ imagePositionOffset +"px)"
            });
        }
    }
}).on("mouseleave", function() {
    $imgInnerWrapper.css({
        transform: "translateX(0px)"
    });

    $imgInnerWrapper = undefined;
    elementLength = 0;
    width = 0;
    elementRangeWidth = 0;
    saveShowedNumberOfElement = 1;
});

您可以在 CodePen

上观看它的工作方式

mouseMove上的水平滚动 - 较小div中的宽div与溢出：隐藏（无法使数学工作）

2 个答案: