非常简单，非常stream畅的JavaScript字幕
我试图find一个非常简单，平滑，轻量级的JavaScript或jQuery的选框。 我已经尝试过丝绸或者其他的东西，但是它不适用于我正在使用的应用程序。 所以越简单，越简单，越容易debugging。 有谁知道一个容易实现的字幕replace的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> hiya 简单演示来自以上build议的评论： http ： //jsfiddle.net/FWWEn/
在mouseover上有暂停function： http : //jsfiddle.net/zrW5q/
希望这有助于，有一个很好的，欢呼！
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'); })
我已经做了非常简单的function选框。 请参阅： http : //jsfiddle.net/vivekw/pHNpk/2/它在mouseover上暂停并恢复。 速度可以变化。 容易明白。
function marquee(a, b) { var width = b.width(); var start_pos = a.width(); var end_pos = -width; function scroll() { if (b.position().left <= -width) { b.css('left', start_pos); scroll(); } else { time = (parseInt(b.position().left, 10) - end_pos) * (10000 / (start_pos - end_pos)); // Increase or decrease speed by changing value 10000 b.animate({ 'left': -width }, time, 'linear', function() { scroll(); }); } } b.css({ 'width': width, 'left': start_pos }); scroll(a, b); b.mouseenter(function() { // Remove these lines b.stop(); // b.clearQueue(); // if you don't want }); // b.mouseleave(function() { // marquee to pause scroll(a, b); // }); // on mouse over } $(document).ready(function() { marquee($('#display'), $('#text')); //Enter name of container element & marquee element });
我刚刚创build了一个简单的jQuery插件。 尝试一下 ;）
以下工作：
你原来的代码的问题是你正在调用scrollticker()通过传递一个string到setInterval ，你应该只是传递函数名称并将其视为一个variables：
lefttime = setInterval(scrollticker, 50);
代替
lefttime = setInterval("scrollticker()", 50);
上帝保存我们…为什么要编写自定义的Marquee jQuery代码…在我没有什么值得的生活 – 只需使用插件的jQuery – marquee（）和使用它，如下面的例子：
首先包括：
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>
接着：
//proporcional speed counter (for responsive/fluid use) var widths = $('.marquee').width() var duration = widths * 7; $('.marquee').marquee({ //speed in milliseconds of the marquee duration: duration, // for responsive/fluid use //duration: 8000, // for fixed container //gap in pixels between the tickers gap: $('.marquee').width(), //time in milliseconds before the marquee will start animating delayBeforeStart: 0, //'left' or 'right' direction: 'left', //true or false - should the marquee be duplicated to show an effect of continues flow duplicated: true });
如果你能使它更简单，更好，我亲爱的你们所有的人。 不要让你的生活比应该变得更加困难。 有关此插件及其function的更多信息，请访问： http : //aamirafridi.com/jquery/jquery-marquee-plugin
我做了我自己的版本，基于@Tats_innit上面提供的代码。 不同的是暂停function。 在这方面做得好一点。
(function ($) { var timeVar, width=0; $.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); if (width == 0) { width = that.width(); }; var textWidth = that.textWidth(), offset = that.width(), i = 0, stop = textWidth * -1, dfd = $.Deferred(), 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, pause: false }, args); 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=width-2; } if (args.pause == false) { timeVar = setTimeout(function () { go() }, args.speed); }; if (args.pause == true) { clearTimeout(timeVar); }; }; if (args.leftToRight) { width = textWidth * -1; width++; stop = offset; } else { width--; } that.css(marqueeCss); timeVar = setTimeout(function () { go() }, 100); return dfd.promise(); }; })(jQuery);
用法：
开始：$（'＃Text1'）。marquee（）
暂停：$（'＃Text1'）。marquee（{pause：true}）
简历：$（'＃Text1'）。marquee（{pause：false}）
响应抵制jQuery选框简单的插件。 教程：
// start plugin (function($){ $.fn.marque = function(options, callback){ // check callback if(typeof callback == 'function'){ callback.call(this); } else{ console.log("secound argumnt (callback) is not a function"); // throw "callback must be a function"; //only if callback for some reason is requiered // return this; //only if callback for some reason is requiered } //set and overite default functions var defOptions = $.extend({ speedPixelsInOneSecound: 150, //speed will behave same for different screen where dusration will be different for each size of the screen select: $('.message div'), clickSelect: '', // selector that on click will redirect user ... (optional) clickUrl: '' //... to this url. (optional) }, options); //Run marque plugin var windowWidth = $(window).width(); var textWidth = defOptions.select.outerWidth(); var duration = (windowWidth + textWidth) * 1000 / defOptions.speedPixelsInOneSecound; var startingPosition = (windowWidth + textWidth); var curentPosition = (windowWidth + textWidth); var speedProportionToLocation = curentPosition / startingPosition; defOptions.select.css({'right': -(textWidth)}); defOptions.select.show(); var animation; function marquee(animation){ curentPosition = (windowWidth + defOptions.select.outerWidth()); speedProportionToLocation = curentPosition / startingPosition; animation = defOptions.select.animate({'right': windowWidth+'px'}, duration * speedProportionToLocation, "linear", function(){ defOptions.select.css({'right': -(textWidth)}); }); } var play = setInterval(marquee, 200); //add onclick behaviour if(defOptions.clickSelect != '' && defOptions.clickUrl != ''){ defOptions.clickSelect.click(function(){ window.location.href = defOptions.clickUrl; }); } return this; }; }(jQuery)); // end plugin
使用这个自定义的jQuery插件如下：
//use example $(window).marque({ speedPixelsInOneSecound: 150, // spped pixels/secound select: $('.message div'), // select an object on which you want to apply marquee effects. clickSelect: $('.message'), // select clicable object (optional) clickUrl: 'services.php' // define redirection url (optional) });
我的文字字幕更多的文字，并绝对位置启用
http://jsfiddle.net/zrW5q/2075/
(function($) { $.fn.textWidth = function() { var calc = document.createElement('span'); $(calc).text($(this).text()); $(calc).css({ position: 'absolute', visibility: 'hidden', height: 'auto', width: 'auto', 'white-space': 'nowrap' }); $('body').append(calc); var width = $(calc).width(); $(calc).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.css('overflow') != "hidden") { that.css('text-indent', width + 'px'); return false; } 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(); }; // $('h1').marquee(); $("h1").marquee(); $("h1").mouseover(function () { $(this).removeAttr("style"); }).mouseout(function () { $(this).marquee(); }); })(jQuery);
