» » Прокрутка чего либо внутри контейнера, при наведении мыши

Прокрутка чего либо внутри контейнера, при наведении мыши

19-02-2015, 21:16
Автор: .
Просмотров: 1 048
Комментариев: 0
Версия для печати

Прокрутка чего либо внутри контейнера, при наведении мыши

 

Не умещаются элементы внутри блока, нужно прокручивать текст при наведении? есть простой способ

Хорошее решение вопроса с прокруткой текста при помощи jQuery нашёл пользователь  Johannes
 

	<div class="scroll-box">
	    <div class="scroll-text"><a href="">This is the text that is too long to fit in the box</a></div>
	</div> 

 

 .scroll-box {
    width: 100px;
    height: 1.2em;
    overflow: hidden;
    position: relative;
}
.scroll-text {
    position: absolute;
    white-space: nowrap;
}
 
 

	$(document).ready(function () {
	    $('.scroll-box').mouseenter(function () {
	        $(this).stop();
	        var boxWidth = $(this).width();
	        var textWidth = $('.scroll-text', $(this)).width();
	        if (textWidth > boxWidth) {
	            var animSpeed = textWidth * 10;
	            $(this).animate({
	                scrollLeft: (textWidth - boxWidth)
	            }, animSpeed, function () {
	                $(this).animate({
	                    scrollLeft: 0
	                }, animSpeed, function () {
	                    $(this).trigger('mouseenter');
	                });
	            });
	        }
	    }).mouseleave(function () {
	        var animSpeed = $(this).scrollLeft() * 10;
	        $(this).stop().animate({
	            scrollLeft: 0
	        }, animSpeed);
	    });
	
		
	});
 

Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.