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的左边缘或右边缘时，我希望能够在图像中滚动horizontall（我有多个#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

以下是使用offset和相对定位的方法。

demo

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上的动画（mouseleave）。每秒20次，我们在一个方向上移动.imagelist 5个像素。这取决于我们正在徘徊的边缘。

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

这有点粗糙，但你可以根据自己的需要进行润色。

使用.scrollWidth侧滚动img div

1 个答案:

demo