marquee
HTML
<section>
<span style="white-space: nowrap;">start
<span id="loop0">hi</span>
<span id="loop1" style="display: none">
test test test test test test test test test test test test test test test test test test test test test test test test test test
</span>
<span id="loop2" style="display: none"><a href="https://www.google.com" target="google">Google</a></span>
<span id="loop3" style="display: none">
test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2
</span>
end</span>
</section>
JavaScript
(function($) {
$.fn.textWidth = function() {
var width = 0;
var calc = '<span style="display: block; width: 100%; overflow-y: scroll; white-space: nowrap;" class="textwidth"><span>' + $(this).html() + '</span></span>';
$('body').append(calc);
var last = $('body').find('span.textwidth:last');
if (last) {
var lastcontent = last.find('span');
width = lastcontent.width();
last.remove();
}
return width;
};
mrqe = function(cntrname, args) {
this.that = cntrname;
this.textWidth = $(this.that).textWidth();
this.offset = $(this.that).width();
this.width = this.offset;
this.css = {
'text-indent' : $(this.that).css('text-indent'),
'overflow' : $(this.that).css('overflow'),
'white-space' : $(this.that).css('white-space')
}
this.marqueeCss = {
'text-indent' : this.width,
'overflow' : 'hidden',
'white-space' : 'nowrap'
}
this.args = $.extend(
true,
{
count: -1,
speed: 1e1,
leftToRight: false,
pause: false,
loop: function() {}
},
args
);
this.i = 0;
this.stop = this.textWidth*-1;
this.dfd = $.Deferred();
var me = this;
this.go = function() {
if($(me.that).css('overflow')!='hidden') {
$(me.that).css('text-indent', me.width + 'px');
console.log('dead1');
return false;
}
if(!$(me.that).length) {
...