代码之家  ›  专栏  ›  技术社区  ›  user433351

无缝jquery天棚/票机

  •  1
  • user433351  · 技术社区  · 14 年前

    我在这里找到了一个用户发布的无缝jquery字幕/ticker代码。我已经将它修改为当滚动/滚动时启动和停止,但当用户滚动时,它通常会滞后。它从不完全停止,但滚动的速度有时是其原始速度的1/10。我加快了速度,所以更容易看到这种滞后。不管怎样,如果有人知道如何解决这个问题,我会非常感激的。

    JQuery

     $(function() {
      var marquee = $("#scroller");
      marquee.css({"overflow": "hidden", "width": "100%"});
    
      // wrap "My Text" with a span (IE doesn't like divs inline-block)
       marquee.wrapInner("<span>");
      marquee.find("span").css({ "width": "49%", "display": "inline-block", "text-align":"center", "padding-right":"1%" });
      marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text"
    
       marquee.wrapInner("<div class='scrolling'>");
      marquee.find("div").css("width", "200%");
    
      var reset = function() {
           $(this).css({"margin-left":"0%"});
           $(this).animate({ "margin-left": "-100%" }, 500, 'linear', reset);
      };
    
      reset.call(marquee.find("div"));
    
      marquee.find("div").bind({
    mouseenter: function () {
     $(this).stop();
     if($(this).css("margin-left") == "-"+$("#scroller").width() + "px") $(this).css("margin-left", "0%");
    },
    mouseleave: function() {
     $(this).stop().animate({ "margin-left": "-100%" }, 500, 'linear', reset);
    }
    });
    });
    

    HTML

    <div id="scroller">
      Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
      Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
      Lorem ipsum. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
      Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
      Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
      Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
      Lorem ipsum. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
      Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
     </div>
    

    谢谢,

    格雷戈

    2 回复  |  直到 13 年前
        1
  •  1
  •   Jon Mifsud    13 年前

    很高兴您找到了一个合适的回复,但是它看起来非常复杂,寻找类似解决方案的新用户无疑会感到困惑,除非他们对javascript有相当的了解。一个类似的jquery插件,具有所有的功能;勾号器停止和启动回调,鼠标悬停以允许您清楚地阅读/点击正确的项目。以及无缝过渡,完全控制方向和速度。你可能想看看 jQuery webTicker 这是一个免费使用的插件,所以尽情享受吧。

        2
  •  0
  •   Community CDub    7 年前

    答案似乎在于jquery在.clone()和.remove()调用中管理内存的方式。有一个非常好的讨论:

    jQuery memory leak with DOM removal

    有关更多详细信息和解决方法,请访问:

    http://forum.jquery.com/topic/severe-memory-leak-with-clone

    祝你好运!