Question

我正试图在http://www.hubspot.com/

上发布推文滚动条

enter image description here

我猜是使用来自http://code.divshot.com/tweetscroller/

的推文卷轴

但由于演示无效，此链接已损坏。

我寻找替代方案。

我找到了http://jsfiddle.net/doktormolle/4c5tt/

HTML：

<ul class="slide">
  <li><img src="http://www.google.com/logos/2010/canadianthanksgiving2010-hp.jpg"/></li>
  <li><img src="http://www.google.com/logos/2010/germany10-hp.gif"/></li>
  <li><img src="http://www.google.com/logos/stpatricks_02.gif"/></li>
</ul>

CSS：

 ul.slide{margin:0;
      padding:0;
      height:80px;
      list-style-type:none;}
 ul.slide li{float:left;
         list-style-type:none;}
 ul.slide img{border:1px solid silver;
         height:80px;}

JS：

 //Plugin start
(function ($) {
    var methods = {
     init: function (options) {
         return this.each(function () {
             var _this = $(this);
             _this.data('marquee', options);
             var _li = $('>li', _this);

             _this.wrap('<div class="slide_container"></div>')
                 .height(_this.height())
                 .hover(function () {
                         if ($(this).data('marquee').stop) {
                             $(this).stop(true, false);
                         }
                     },
                     function () {
                         if ($(this).data('marquee').stop) {
                             $(this).marquee('slide');
                         }
                     })
                 .parent()
                 .css({
                     position: 'relative',
                     overflow: 'hidden',
                     'height': $('>li', _this).height()
                 })
                 .find('>ul')
                 .css({
                     width: screen.width * 2,
                     position: 'absolute'
                 });

             for (var i = 0; i < Math.ceil((screen.width * 3) / _this.width()); ++i) {
                 _this.append(_li.clone());
             }

             _this.marquee('slide');
         });
     },

     slide: function () {
         var $this = this;
         $this.animate({
                 'left': $('>li', $this).width() * -1
             },
             $this.data('marquee').duration,
             'swing',
             function () {
                 $this.css('left', 0).append($('>li:first', $this));
                 $this.delay($this.data('marquee').delay).marquee('slide');

             }
         );

     }
     };

     $.fn.marquee = function (m) {
     var settings = {
         'delay': 2000,
         'duration': 900,
         'stop': true
     };

     if (typeof m === 'object' || !m) {
         if (m) {
             $.extend(settings, m);
         }

         return methods.init.apply(this, [settings]);
     } else {
         return methods[m].apply(this);
     }
 };
 })(jQuery);

 //Plugin end

 //call
 $(document).ready(
 function () {
     $('.slide').marquee({
         delay: 3000
     });
 }
 );

这很好，只做了很少的修改

http://jsfiddle.net/3pZwR/1/

唯一的问题是它在每个div滚动后停止。

我想让它无限滚动就像效果而不停止它。就像在hubspot上一样。

Answer 1

你应该使用另一个 JQuery Easing 方法而不是＆＃34; swing＆＃34;。在JQuery网站上查看Easings：http://api.jqueryui.com/easings/

div滚动的无限循环

1 个答案: