jquery滚动文本需要仍然在鼠标悬停

时间:2012-06-26 08:39:47

标签: jquery html

我在我的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>

当鼠标悬停在文本上时,我需要使这个滚动文本仍然存在。但我不知道怎么办?

请回复

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

您必须将mouseenterhover事件绑定到停止动画的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");
});