javascript - 使用 .scrollWidth 横向滚动 img div

Question

我有一个简单的 html 文档，其中包含包含一系列图像的 div:

<div id="container">
    <div id="imagelist">
        <a href="images/1.jpg"><img src="images/1b.jpg"/>
        <a href="images/2.jpg"><img src="images/2b.jpg"/>
        <a href="images/3.jpg"><img src="images/3b.jpg"/>
        <a href="images/4.jpg"><img src="images/4b.jpg"/>
        <a href="images/5.jpg"><img src="images/5b.jpg"/>
        <a href="images/6.jpg"><img src="images/6b.jpg"/>
    </div> 
</div> 

我希望当鼠标悬停在 div 的左边缘或右边缘时能够水平滚动图像(我有多个 #imagelists 全部垂直堆叠)

我正在尝试使用 .scrollWidth() 函数(位于我的 script.js 文件中):

var imglist = $('#imagelist');
$(imglist).mousemove(function(e) {
        var percent = e.clientX / $(imglist).width();
        $(imglist).scrollWidth($(imglist).width() * percent);
});

当然，这根本不起作用!我一直在尝试在我见过的一些很好的例子之后对此进行建模，例如 This 。我应该改变什么才能使我的#imagelist可滚动？

Answer 1

这是一种使用偏移和相对定位来实现此目的的方法。

demo

HTML 看起来与您的类似，但我们为边缘创建了元素。好处是，如果您决定需要 :hover 样式(演示中的示例)，我们可以使用 CSS 对其进行样式设置。

<div class="imagecontainer">
    <div class="imagelist">
        <img src="http://placehold.it/400x300">
        ...
        <img src="http://placehold.it/400x300">
    </div>

    <div class="edge right"></div>
    <div class="edge left"></div>
</div>

整个 CSS 都在演示中，这只是要点。

.imagecontainer {
    width: 100%;
    height: 400px;
    overflow-x: hidden;
    position: relative;
}

.imagelist {
    /* Width allows up to 100 screenfuls, feel free to add a 0 
       Limiting can be done in the JavaScript */
    width: 10000%;
    height: 400px;
    position: relative;
    /* Give it a default left of negative to allow scrolling in either direction */
    left: -500px; top: 0;
    clear: right;
}

.imagelist img {
    float: left;   
}

.edge {
    position: absolute; top: 0;
    width: 50px; height: 100%;
}

.edge.left { left: 0; }
.edge.right { right: 0; }

JavaScript 是有趣的部分。我们找到边缘并观察悬停和离开事件。考虑到一次只能悬停一个(无论是实际上还是由于 mouseenter)，我们只有一个计时器指针。该计时器控制我们的动画，并用于在 mouseleave 上停止动画 (clearInterval)。我们每秒 20 次将 .imagelist 向一个方向移动 5 个像素。这是根据我们悬停在哪个边缘来确定的。

我们使用 .parent().find('.imagelist') 而不是使用 $('.imagelist') ，这样就可以有任意数量的图像页面上列出。

var timer = 0;

$('.edge').mouseenter(function(){
    var $self = $(this);
    var $imglist = $self.parent().find('.imagelist');
    timer = setInterval(function(){
        var amount, changed;
        if ($self.hasClass("left"))
            amount = -5;
        else 
            amount = 5;
        changed = $imglist.offset().left + amount;
        $imglist.offset({left: changed});
    }, 50)
}).mouseleave(function(){
    clearInterval(timer);
});

它有点粗糙，但您可以对其进行完善以满足您的需要。