0

http://jsfiddle.net/gkTWC/1256/

作った例です。

基本的に、javascript

$(document).ready(function() {
    var i = 0;
    $(".marqueeElement").each(function() {
          var $this = $(this);
          $this.css("top", i);
          i += 60;
          doScroll($this);
    });
});

    function doScroll($ele) {
        var top = parseInt($ele.css("top"));
        if(top < -50) {
            top = 180;
            $ele.css("top", top);
        }
        $ele.animate({ top: (parseInt(top)-60) },600,'linear', function() {doScroll($(this))});
    }

と html マークアップ

<div id="mholder">
    <div class="marqueeElement">1st</div>
    <div class="marqueeElement">2nd</div>
    <div class="marqueeElement">3rd</div>
    <div class="marqueeElement">4th</div>
</div>

そのため、連続的に上に移動するだけなので、マウスの入力で停止し、マウスを離れると開始するようにしたい

私はそれを止めるためにmouseenterイベントを作りました

$(".marqueeElement").mouseover(function() {
            $('.marqueeElement').stop(true);
        })

それは正常に動作しますが、今は onmouseleave で再び動かす方法にこだわっています。

助けてください。ありがとう!!!

4

1 に答える 1

1

このフィドルを試してください：http://jsfiddle.net/mareebsiddiqui/gkTWC/1259/

JS:

$(document).ready(function () {
    var i = 0;
    $(".marqueeElement").each(function () {
        var $this = $(this);
        $this.css("top", i);
        i += 60;
        doScroll($this);
    });

    $(".marqueeElement").hover(function () {
        $('.marqueeElement').stop(true);
    }, function () {
        $('.marqueeElement').animate({
            top: (parseInt(top) + 60)
        }, 600, 'linear', function () {
            doScroll($(this))
        });
    });
});

function doScroll($ele) {
    var top = parseInt($ele.css("top"));
    if (top < -50) {
        top = 180;
        $ele.css("top", top);
    }
    $ele.animate({
        top: (parseInt(top) - 60)
    }, 600, 'linear', function () {
        doScroll($(this))
    });
}
于 2013-06-20T07:50:24.513 に答える