jQuery marquee plugin

Ai un proiect pe care l-ai realizat în PHP? Doreşti să propui un proiect pe care să îl realizăm în cadrul comunităţii?

Moderatori: cristi, icsfails, Moderatori

Avatar utilizator
MihaiC
Senior Member
Mesaje: 1644
Membru din: Dum Mai 14, 2006 8:07 pm

jQuery marquee plugin

Mesajde MihaiC » Mie Oct 24, 2012 12:56 pm

Mi s-a intamplat la munca sa trebuiasca sa gasesc un script care sa se comporte ca si un marquee, dar sa mearga in continuu.
Am gasit ceva atunci, dar era scris mizerabil, asa ca am creat plugin-ul acesta pentru cine are nevoie de el.
Nu are cine stie ce optiuni, dar merge.

Cod: Selectaţi tot

<!DOCTYPE html>
<html>
<head>
<title>Marquee</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="marquee.js"></script>
<script>
$(document).ready(function() {
   $('#marquee').marquee({ width: 300 });
});
</script>
</head>
<body>
   <div id="marquee">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</body>
</html>


marquee.js

Cod: Selectaţi tot

(function($) {
   $.fn.marquee = function(options) {
      return this.each(function() {
         var th = $(this),
            _ = {
            fontSize: null,
            width: null,
            height: 30,
            slidersCl: 'marquee-sliders',
            speed: 100,
            increment: 5,
            space: 10,
            pauseOnMouseOver: true,
            init: function() {
               _.marquee = th;
               _.preFu();
               _.moveFu();
               _.endFu();
            },
            preFu: function() {
               _.marqueeText = _.marquee.text();
               _.marquee.text('');
               
               if (_.fontSize == null) { _.fontSize = parseInt(_.marquee.css('fontSize')); }
               if (_.width == null) { _.width = parseInt(_.marquee.css('width')); }
               
               _.marquee.css({
                  fontSize: _.fontSize,
                  lineHeight: _.height + 'px',
                  width: _.width,
                  height: _.height,
                  position: 'relative',
                  overflow: 'hidden'
               });
               
               var sliders = '<div class="' + _.slidersCl + '"></div>';
               _.marquee
                .append(sliders)
                .append(sliders);
               
               _.sliders = _.marquee
                  .find('.' + _.slidersCl)
                  .text(_.marqueeText);
               
               _.sliders.css({
                  position: 'absolute',
                  whiteSpace: 'nowrap',
                  top: 0,
                  left: _.width
               });
               
               _.slidersWidth = _.sliders.width() + _.space;
               $(_.sliders[1]).css({ left: (_.width + _.slidersWidth) });
            },
            moveFu: function() {
               _.int = setInterval(
                  function() {
                     _.sliders.each(function() {
                        var th = $(this),
                           left = parseInt(th.css('left'));
                        if (left < -_.slidersWidth) {
                           left = (_.slidersWidth > _.width) ? _.slidersWidth : _.width;
                        }
                        th.css({ left: (left - _.increment) });
                     });
                  },
                  _.speed
               );
            },
            endFu: function() {
               _.marquee
                .mouseover(function() {
                  if (_.pauseOnMouseOver) {
                     _.int = clearInterval(_.int);
                  }
               }).mouseout(function() {
                  if (_.pauseOnMouseOver) {
                     _.moveFu();
                  }
               });
            }
         };
         
         if (typeof options == 'object') {
            $.extend(_, options);
         }
         _.init();
      });
   }
})(jQuery);


Dev @ oblio.eu

Înapoi la “Proiecte”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 12 vizitatori