0

我有一个简单的 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 可滚动？

4

1 回答 1

3

这是一种使用offset和相对定位的方法。

演示

HTML 看起来与您的相似，不同之处在于我们为边缘创建元素。好处是我们可以用 CSS 为它们设置样式，如果您决定想要:hover样式（演示中的示例）。

<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），我们只需要一个计时器指针。此计时器控制我们的动画，并用于停止动画 ( clearInterval) on mouseleave。每秒 20 次，我们将.imagelist5 个像素向一个方向移动。这取决于我们悬停在哪个边缘上。

而不是使用$('.imagelist')我们使用.parent().find('.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);
});

它有点粗糙，但您可以根据自己的需要对其进行抛光。

于 2013-07-08T21:15:42.770 回答