希望这对您有所帮助,加油!
html
<h1>Hello World!</h1><h2>I'll marquee twice</h2><h3>I go fast!</h3><h4>Left to right</h4><h5>I'll defer that question</h5>
jQuery代码
(function($) { $.fn.textWidth = function(){ var calc = '<span >' + $(this).text() + '</span>'; $('body').append(calc); var width = $('body').find('span:last').width(); $('body').find('span:last').remove(); return width; }; $.fn.marquee = function(args) { var that = $(this); var textWidth = that.textWidth(), offset = that.width(), width = offset, css = { 'text-indent' : that.css('text-indent'), 'overflow' : that.css('overflow'), 'white-space' : that.css('white-space') }, marqueeCss = { 'text-indent' : width, 'overflow' : 'hidden', 'white-space' : 'nowrap' }, args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args), i = 0, stop = textWidth*-1, dfd = $.Deferred(); function go() { if(!that.length) return dfd.reject(); if(width == stop) { i++; if(i == args.count) { that.css(css); return dfd.resolve(); } if(args.leftToRight) { width = textWidth*-1; } else { width = offset; } } that.css('text-indent', width + 'px'); if(args.leftToRight) { width++; } else { width--; } setTimeout(go, args.speed); }; if(args.leftToRight) { width = textWidth*-1; width++; stop = offset; } else { width--; } that.css(marqueeCss); go(); return dfd.promise(); }; })(jQuery);$('h1').marquee();$('h2').marquee({ count: 2 });$('h3').marquee({ speed: 5 });$('h4').marquee({ leftToRight: true });$('h5').marquee({ count: 1, speed: 2 }).done(function() { $('h5').css('color', '#f00'); })


