прокрутка картинки от одного стороны экрана до другой (jquery)

Discussion in 'PHP' started by ufalog, 23 Apr 2010.

  1. ufalog

    ufalog Elder - Старейшина

    Joined:
    28 Jul 2007
    Messages:
    174
    Likes Received:
    6
    Reputations:
    -5
    [​IMG]


    суть карабль должен выплывать с лева и доплывать до права и исчезать и появться снова слева

    примерная функция jquery

    PHP:
    $(".carabl").animate({"left""+=200px"}, "slow"); $(".carabl").animate({"left""-=400px"}, "slow"); $(".carabl").animate({"left""+=200px"}, "slow");

    счас карабль катает туда сюда - обратно

    а надо чтоб слева выплывал доплывал до права и снова выплывал с лева ;)
     
  2. ufalog

    ufalog Elder - Старейшина

    Joined:
    28 Jul 2007
    Messages:
    174
    Likes Received:
    6
    Reputations:
    -5
    пример http://www.ilovesanya.ru/
     
  3. $now

    $now Member

    Joined:
    27 Apr 2009
    Messages:
    75
    Likes Received:
    9
    Reputations:
    3
    Ну так, доведите его до края экрана, уведите за край, затем перебросте в начальное положение и все заново.

    Примерно так (предполагаю что ширина корбаля 100px а экрана 1280)

    PHP:
    $(".carabl").css({"left""-100px"});
    while (
    false) {
        $(
    ".carabl").animate{"left""1280px"}, "slow", function() {
            $(
    ".carabl").css({"left""-=100px"});
        });
    }
     
    #3 $now, 23 Apr 2010
    Last edited: 23 Apr 2010
  4. ufalog

    ufalog Elder - Старейшина

    Joined:
    28 Jul 2007
    Messages:
    174
    Likes Received:
    6
    Reputations:
    -5
    а если мне надо не 1280px а 100% тоесть шапка резиновая..
     
  5. Byte_

    Byte_ Elder - Старейшина

    Joined:
    7 Sep 2008
    Messages:
    143
    Likes Received:
    34
    Reputations:
    2
    ufalog, если у тебя шапка с id #head
    Code:
    $(".carabl").css({"left": "-100px"}); 
    while (false) { 
        $(".carabl").animate{"left": ($("#head").width() + 100) + "px"}, "slow", function() { 
            $(".carabl").css({"left": "-=100px"}); 
        }); 
    }  
    
    З.Ы.: Если не сработает, то parseInt($("#head").width())
     
  6. $now

    $now Member

    Joined:
    27 Apr 2009
    Messages:
    75
    Likes Received:
    9
    Reputations:
    3
    ufalog
    Ну подгони под свою верстку. Грубо говоря тебе нужно написать два css, для корабля в крайних положениях, остальное дело техники.

    Можно даже написать два разных класса corabl1 и corabl2 и их переключать.

    Я просто умножаю на единичку.
     
    #6 $now, 23 Apr 2010
    Last edited: 23 Apr 2010
  7. WNZRS

    WNZRS Member

    Joined:
    3 Sep 2009
    Messages:
    294
    Likes Received:
    52
    Reputations:
    1
    Сам придумал себе сложность, всё делается без js:
    HTML:
    <marquee behavior="alternate" direction="right" loop="0" scrollamount="5"><img src="http://egoweb.ru/headerbar_object_sailboot.png"></marquee>
     
  8. ufalog

    ufalog Elder - Старейшина

    Joined:
    28 Jul 2007
    Messages:
    174
    Likes Received:
    6
    Reputations:
    -5
    так то оно да.. но уж больно они рывками получается...в ие8 ваще он скачет по 2 см так что лутше на джаве
     
  9. $now

    $now Member

    Joined:
    27 Apr 2009
    Messages:
    75
    Likes Received:
    9
    Reputations:
    3
    WNZRS
    Не понимаю, что сложного в использовании js.