jquery - jquery scoll 文本需要在鼠标悬停时保持静止

Question

我已经在我的 php 网站中实现了 jquery 滚动文本。查看我的代码

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('.scrollingtext').bind('marquee', function() {
            var ob = $(this);
            var tw = ob.width();
            var ww = ob.parent().width();
            ob.css({ left: -tw });
            ob.animate({ left: ww }, 20000, 'linear', function() {
                ob.trigger('marquee');
            });
        }).trigger('marquee');

    });
    </script>

正文部分内

<div class="jp-title">

    <ul>
    <li class="scrollingtext" >

    <a href="index"   >welcome </span>

    </li>
    </ul>

</div>

当鼠标悬停在文本上时，我需要使此滚动文本保持静止。但我不知道怎么做？

请回复

Answer 1

您必须将一个mouseenter或hover事件绑定到scrollingtext停止动画的元素，如下所示：

$(".scrollingtext").bind("mouseenter", function() {
    $(this).stop();
});

我猜在鼠标离开后你想重新开始滚动。尝试这个：

$(".scrollingtext").bind("hover", function() {
    // equivalent to mouseenter. stop() stops all animation
    $(this).stop();
}, function() {
    // equivalent to mouseleave. this triggers your already existing 'marquee' event
    $(this).trigger("marquee");
});

Answer 2

您可以尝试使用 jquery marquee 插件。默认情况下，它会在悬停时停止选取框。

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/