Сделать элемент «скользить» влево.Как слайдер - PullRequest
Новая
       28

Сделать элемент «скользить» влево.Как слайдер

0 голосов
/ 11 марта 2011

По сути, я пытаюсь создать простую версию плагина Smooth Scroll, потому что он слишком тяжел для моих простых нужд. У меня небольшой опыт работы с jQuery, и мне было интересно, как можно уменьшить левый атрибут элемента, если указатель мыши находится над другим элементом. 

$('.fade_right').live('mouseover', function() {
    //Tell code to go left
});

Посмотрел вокруг и даже на источник плагина плавной прокрутки, но я не могу разобраться. Любая помощь

Ответы [ 4 ]

2 голосов
/ 11 марта 2011

Вы ищете функцию jQuery .animate(). Прямо на этой странице есть пример, который делает (почти) именно то, что вы ищете.

Если вы хотите, чтобы он непрерывно анимировался, вам нужно использовать цикл while в сочетании с mouseenter; до тех пор, пока mouseleave не был вызван, вам нужно будет постоянно выполнять цикл. Может быть проще использовать вызов Javascript onmouseout, а не mouseleave. Поскольку знакомая фраза идет, я оставляю это как упражнение читателю.

0 голосов
/ 11 марта 2011

Не использует прямую трансляцию, но использует hover() для запуска левого вызова animate, а затем при нажатии мыши сбрасывает вид в исходное положение ... 

$('.fade_right').hover(function() {
    $(this).stop().animate({
        "left": $(this).width() //just a simple way to make it fluid
    }, $(this).width() * 5); //some interval based upon the width for the time.
}, function() {
    $(this).stop().animate({
        //Put it back to where it was...
        left: $(this).data("oldLeft")
    }, "fast");
}).data("oldLeft", $('.fade_right').css("left"));

Работает нормально в примере, ноТрудно сказать, в зависимости от ваших потребностей.

Пример кода на jsfiddle .

0 голосов
/ 11 марта 2011

Здесь у вас есть полная, простая демонстрационная страница. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Simple scrolling div demo</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

        <script type="text/javascript">

            var intervalId;
            var scrollingSpeed = 16;    //the lesser, the faster; but don't use less than 16
            var pixelStep = 2;          //eventually, you want to increase this value for higher speed

            $(document).ready(function() {

                $('.fade_right').mouseenter(function() {
                    intervalId = setInterval(stepToLeft, scrollingSpeed);
                });

                $('.fade_right').mouseleave(function() {
                    clearInterval(intervalId);
                });

                function stepToLeft() {

                    var scrollingDiv = $('#scrollingDiv');
                    var x = parseInt(scrollingDiv.css('left'));
                    scrollingDiv.css('left', (x - pixelStep) + "px");

                }

            });

        </script>
    </head>
    <body>
        <div id="scrollingDiv" style="position: relative; background-color: #000; color: #fff; width: 100px; height: 100px; left: 0px;">test</div>
        <div class="fade_right" style="background-color: red; height: 50px; width: 100px;">Move to left</div>
    </body>
</html>

Подробнее о функциях setInterval и clearInterval здесь .

0 голосов
/ 11 марта 2011

В Jquery вы можете использовать событие mouseenter, в дополнение к функции animate.

Попробуйте это: 

$('.fade_right').mouseenter(function(){
  $(this).animate({"left": "+=50px"}, "slow");
});

Надеюсь, это поможет

...