Użyj dwóch przycisków (obrazów), aby przewinąć DIV ustawiony na przepełnienie: ukryty; z jQuery

Question

Mam kontener div:

.mask { 
    height: 157px; 
    overflow: hidden; 
} 

zawartość wewnątrz tego kontenera jest dłuższy niż 157px. Mam dwie linki (obrazy), które chcę wykorzystać do przewijania zawartości wewnątrz pojemnika górę lub w dół:

<ul class="scroll"> 
<li><a href="#"><img src="img/text-down-icn.png" alt="scroll down" /></a></li> 
<li><a href="#"><img src="img/text-up-icn.png" alt="scroll up" /></a></li> 
</ul> 

jak mogę dostać te dwa linki do przewijania zawartości wewnątrz pojemnika?

thanks a lot

======================================= ====

Dzięki za pomoc. Okazuje się, że działa najlepiej przy użyciu wtyczki scrollTo (http://plugins.jquery.com/project/ScrollTo).

$(document).ready(function(){ 
    $(".down").click(function() { 
     $('.mask').scrollTo('+=156px', 500);; 
    }); 

    $(".up").click(function() { 
     $('.mask').scrollTo('-=156px', 500);; 
    }); 
}); 

Answer 1

Można sprawdzić te przykłady, aby dowiedzieć się, jak wdrożyć je lub bezpośrednio z nich korzystać, aby zadanie wykonane:

1- HoverScroll jQuery plugin

2- jCarousel

3- Smooth Div Scroll

Answer 2

Jeśli chcesz używać zdarzeń onmouseover i onmouseout, możesz użyć czegoś takiego:

onmouseover:

function scrollUp(){ 
    document.getElementById('scroll-pane').scrollTop -= 15; // vertical scroll increments 
    timerScrollUp = setTimeout('scrollUp()',10); 
} 

i onmouseout ciebie kasowanie:

clearTimeout(timerScrollUp); 

Answer 3

Oto kod, który działa :) Musisz dodać trochę stylizacji, aby zapobiec przesuwaniu zbyt przycisków. Dodaj "ustaloną" pozycję dla przycisków.

Essentialyl to, co się tutaj dzieje, to przesuwanie zawartości w górę/w dół do/z pojemnika, co powoduje przewijanie. Podczas gdy same przyciski są nietknięte!

Nadzieja ta jest użytkowania :)

<div class="mask"> 
<div id="mover"> 
Content Here 
</div> 
<ul class="scroll"> 
    <li><a href="#" class="down"><img src="img/text-down-icn.png" alt="scroll down" /></a></li> 
    <li><a href="#" class="up"><img src="img/text-up-icn.png" alt="scroll up" /></a></li> 
</ul> 
</div> 

<script type="text/javascript"> 
    $(".down").click(function() { 
     $("#mover").animate({marginTop: '-=20px'}, 0); 
    }); 

    $(".up").click(function() { 
     $("#mover").animate({ marginTop: '+=20px' }, 0); 
    }); 
</script> 

<style> 
.mask { 
    height: 157px; 
    overflow: hidden; 
} 

.scroll 
{ 
    float: right; 
} 
</style>