Используйте две кнопки (изображения) для прокрутки DIV с переполнением: скрытый;с помощью jQuery - PullRequest
Новая
       9

Используйте две кнопки (изображения) для прокрутки DIV с переполнением: скрытый;с помощью jQuery

5 голосов
/ 28 июня 2011

У меня есть контейнер div: 

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

содержимое внутри этого контейнера длиннее 157 пикселей. У меня есть две ссылки (изображения), которые я хочу использовать для прокрутки содержимого внутри контейнера вверх или вниз: 

<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>

как мне получить эти две ссылки для прокрутки содержимого внутри контейнера?

Большое спасибо

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

Спасибо за вашу помощь. Оказывается, это лучше всего работает с помощью плагина scrollTo (http://plugins.jquery.com/project/ScrollTo).

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

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

Ответы [ 3 ]

2 голосов
/ 28 июня 2011

Если вы хотите использовать события onmouseover и onmouseout, вы можете использовать что-то вроде этого:

onmouseover: 

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

и отключите таймер: 

clearTimeout(timerScrollUp);
1 голос
/ 28 июня 2011

Вот код, который работает :) Вам нужно будет добавить немного стиля, чтобы кнопки тоже не двигались.Добавьте «фиксированную» позицию для кнопок.

Суть в том, что здесь происходит - содержимое перемещается вверх / вниз в / из контейнера, что делает его прокручиваемым.Пока сами кнопки не тронуты!

Надеюсь, это пригодится:) 

<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>
0 голосов
/ 28 июня 2011

Вы можете ознакомиться с этими примерами, чтобы узнать, как реализовать это или напрямую использовать их для выполнения задачи:

1- Плагин HoverScroll jQuery

2- jCarousel

3- Гладкая прокрутка Div

...