Question

我在水平滚动div中有一个vimeo视频库。在左/右箭头悬停时，图库将向左/右动画。我的问题是，是否有可能当我停止悬停时，div会继续滚动到下一个视频索引？

例如，当我滚动浏览包含div时，如果我鼠标输出时视频1的一半被切断，div是否会一直滚动直到达到video2？

left-arrow        |video1     video2    video3|    right-arrow
                  |------containing div------>|

这就是我现在所拥有的：

HTML

<div id="animation-wrapper">
<span id="animate-arrow-left">&#8672;</span>
<div id="animation-viewport">
<div id="all-animate-video">
<iframe src="url" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="url" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="url" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe src="url" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<span id="animate-arrow-right">&#8674;</span>
</div>

的JavaScript

function scrollAnimate() {
$('#animation-viewport').animate({ scrollLeft: amount }, 100, 'linear',function() {
    if (amount != '') {
            scrollAnimate();
         }
     });
 }
$('#animate-arrow-right').hover(function() {
     amount = '+=40';
     scrollAnimate();
 }, function() {
     amount = '';
 });

$('#animate-arrow-left').hover(function() {
     amount = '-=40';
     scrollAnimate();
 }, function() {
     amount = '';
 });

Answer 1

以下是一个可以应用于代码的工作示例：

http://jsfiddle.net/studiotate/hz3bk94k

您可以手动滚动或使用左右区域自动滚动。

HTML：

<div id="container">
    <div id="arrows">
        <div class="arrow left"></div>
        <div class="arrow right"></div>
    </div>
    <div id="videos">
        <div class="video red"></div>
        <div class="video blue"></div>
        <div class="video green"></div>
    </div>
</div>

CSS：

body {
    margin: 0px auto;
}

#arrows .arrow {
    background-color: #000;
    height: 200px;
    opacity: .5;
    position: fixed;
    top: 0px;
    width: 50px;
}

#arrows .arrow.left {
    left: 0px;
}

#arrows .arrow.right {
    right: 0px;
}

#videos {
    font-size: 0px;
    height: 200px;
    overflow: auto;
    white-space: nowrap;
    width: 100%;
}

#videos .video {
    display: inline-block;
    height: 200px;
    width: 100%
}

#videos .video.red {
    background-color: red;
}

#videos .video.blue {
    background-color: blue;
}

#videos .video.green {
    background-color: green;
}

JS：

var scrollDirection, scrollInterval, scrollLeft;

var startScrolling = function(direction) {
    scrollDirection = direction;
    scrollInterval = setInterval(function() {
        var scroll = scrollDirection == 'left' ? -5 : 5;
        var left = $('#videos').scrollLeft() + scroll;
        $('#videos').scrollLeft(left);
    }, 1);
};

var stopScrolling = function() {
    clearInterval(scrollInterval);
};

$('.arrow').on('mouseleave', stopScrolling);
$('.arrow.left').on('mouseenter', function() {
    startScrolling('left');
});
$('.arrow.right').on('mouseenter', function() {
    startScrolling('right');
});

$('#container').on('mouseleave', function() {
    var video = 0;
    $('.video').each(function() {
        if (
            (scrollDirection == 'left' && $(this).offset().left <= 0)
            ||
            (scrollDirection == 'right' && $(this).offset().left >= 0)
        ) {
            video = $(this).index();
            return false;
        }
    });

    var left = $('#videos').outerWidth() * video;
    $('#videos').animate({ scrollLeft: left });
});

可以滚动到div中的下一个元素吗？

HTML

的JavaScript

1 个答案: