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