jQuery使用两个按钮上下滚动div [英] jQuery scroll a div up and down using two buttons

问题描述

我有一组简单的两个按钮，将它们悬停时应使div上下移动以模拟滚动效果:

I have a simple set of two buttons that when hovered should make a div move up and down to simulate a scrolling effect:

$("#down").hover(function () {

    $('.scroll').animate({ "marginTop": "-=50px" }, "fast");

});

$("#up").hover(function () {

    $('.scroll').animate({ "marginTop": "+=50px" }, "fast");

});

但是我有两个问题:

1.)我需要它在结束时停止，然后隐藏按钮，以便他们知道到达终点为止

1.) I need it to stop when it gets to the end and then hide the button so they know they've reached the end

2.)当用户将鼠标悬停在其上时，它需要连续滚动，当前仅在鼠标悬停时进行一次，然后在鼠标离开时再次运行.

2.) It needs to scroll continually when the user has their mouse over, currently it does it just once on mouse over and then runs it again on mouse leave.

3.)如果内容不超过父元素的高度，则隐藏两个按钮，因为我们不需要滚动它.

3.) If the content does not exceed the parent element height then hide both buttons as we don't need to scroll it.

任何人都可以帮忙吗?

我在想，也许可以通过找到滚动面板的高度并判断其相对于其父元素的偏移量来解决1，该父元素将其固定并创建框架视图?

I was thinking that perhaps 1 could be solved by finding out the height of the scroll panel and judging its offset to its parent element that holds it and creates the framed view?

谢谢

推荐答案

此代码仍需要进行一些调试，但是您可以从中获得启发:

This code still need some debugging, but you can get the idea in it:

$(document).ready(function() {

    if ($('.content').height() > $('.container').height()) {
        $("#down").hover(function () {
            animateContent("down");
        }, function() { $('.content').stop(); });

        $("#up").hover(function () {
            animateContent("up");
        }, function() { $('.content').stop(); });
    }
});

function animateContent(direction) {  
    var animationOffset = $('.container').height() - $('.content').height();
    if (direction == 'up') {
        animationOffset = 0;
    }

    $('.content').animate({ "marginTop": animationOffset + "px" }, "fast");
}

代码: http://jsfiddle.net/a89DF/6/

这篇关于jQuery使用两个按钮上下滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！