{lang: ‘es’}Simple marquesina jquey estructura con list. Aquí puedes verla en funcionamiento. Puedes configurar las opciones de espera y duración además de si quieres que se detenga al pasar el cursor. ‘delay’:2000, ‘duration’:900, ‘stop’:true
1 2 3 4 5 6 7 |
<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> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
//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});} ); |
{lang: ‘es’}Una de la ventaja de la función .animate() frente a .css() es el slide a la hora de cambiar de una posición a otra. Aquí tenéis un ejemplo de como mover una capa en diagonal.
1 2 |
$("#div").animate({left: '+=100', top: '+=100'}, 1000); <div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;">PRUEBA</div> |