我试图找到一个非常简单,流畅,轻巧的javascript或jquery字幕。我已经尝试过丝绸选框之类的东西,但不适用于我正在使用的应用程序。因此,越短越好,越好-并且越容易调试。有人知道字幕易于实现的JavaScript替换吗?
码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript"> var tWidth='300px'; // width (in pixels) var tHeight='25px'; // height (in pixels) var tcolour='#ffffcc'; // background colour: var moStop=true; // pause on mouseover (true or false) var fontfamily = 'arial,sans-serif'; // font for content var tSpeed=3; // scroll speed (1 = slow, 5 = fast) // enter your ticker content here (use \/ and \' in place of / and ' respectively) var content='Are you looking for loads of useful information <a href="http:\/\/javascript.about.com\/">About Javascript<\/a>? Well now you\'ve found it.'; var cps=-tSpeed; var aw, mq; var fsz = parseInt(tHeight) - 4; function startticker(){if (document.getElementById) {var tick = '<div style="position:relative;width:'+tWidth+';height:'+tHeight+';overflow:hidden;background-color:'+tcolour+'"'; if (moStop) tick += ' onmouseover="cps=0" onmouseout="cps=-tSpeed"'; tick +='><div id="mq" style="position:absolute;right:0px;top:0px;font-family:'+fontfamily+';font-size:'+fsz+'px;white-space:nowrap;"><\/div><\/div>'; document.getElementById('ticker').innerHTML = tick; mq = document.getElementById("mq"); mq.style.right=(10+parseInt(tWidth))+"px"; mq.innerHTML='<span id="tx">'+content+'<\/span>'; aw = document.getElementById("tx").offsetWidth; lefttime=setInterval("scrollticker()",50);}} function scrollticker(){mq.style.right = (parseInt(mq.style.right)>(-10 - aw)) ? mq.style.right = parseInt(mq.style.right)+cps+"px": parseInt(tWidth)+10+"px";} window.onload=startticker; </script> </head> <body> <div id="ticker"> this is a simple scrolling text! </div> </body> </html>
希望这对您有所帮助,加油!
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 style="display:none">' + $(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'); })