Question

已经做出的一个例子。

基本上是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>

所以它只是不断向上移动，现在我想让它在鼠标输入时停止并在mouseleave上启动

我做了和mouseenter事件来阻止它

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

它工作正常，但现在我坚持如何让它再次移动onmouseleave。

请帮助。 thankk !!!

Answer 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))
    });
}

如何为此选取框jquery添加停止和启动功能

1 个答案: