2014-02-11 57 views
0

惠,JQuery的跑马灯滑动的顶部

只是一个新手试图得到的东西做,出想法的我有一个从jQuery函数marqued其marqueed左侧UL,这意味着其滑动离开我想要做的是使其滑动顶

我已经在这里工作小提琴

http://jsfiddle.net/arafays/wnXh8/

(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:'relative'}); 

       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':4000, 
       'duration':2000, 
       '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); 


    jQuery(document).ready(
function(){jQuery('.some ul').marquee({delay:3000});} 
); 

我只想让它向上滑动instea d向左滑动我尝试制作顶端并做一些其他的一些东西,但它制作完整的UL滑出空白空间

回答

1

这样子?

http://jsfiddle.net/wnXh8/5/

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

        } 
        ); 
+0

那正是我想做的事,你改变了宽度与高度非常感谢你 –

+0

什么做的,而不是现在是怎样,我需要改变,这样的动画是连续的,(每个幻灯片停止)? – CiprianD