The Archives

• 2013, java, jquery

  Slider jquery

  01.13.13 | Permalink | Comment?

  Share|

  {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

  CSS

  <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

  <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>

  CSS

  //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});} );

  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});} );

• 2012, java, jquery

  Mover capa en diagonal con .animate() jquery

  12.28.12 | Permalink | Comment?

  Share|

  {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.

  CSS

  $("#div").animate({left: '+=100', top: '+=100'}, 1000); <div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;">PRUEBA</div>​

  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>​

Albert Suarez | Webmaster