非常簡單，非常流暢的JavaScript Marquee

我試圖找到一個非常簡單且流暢，輕量級的javascript或jquery選框。我已經試過silk marquee什麼的，但它不適用於我正在使用的應用程序。所以越簡單越好，越容易調試。有沒有人知道一個容易實現的字幕替換的JavaScript？非常簡單，非常流暢的JavaScript Marquee

Pastebin

代碼

<!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>

來源

2012-05-11 Derp

'止跌」工作「很難描述，請描述它是如何工作的？並請發佈您的標記以及 –

@derp。你能發佈一個你已經使用過的javascript和html代碼嗎？我們可以幫助您瞭解造成問題的原因。 – OnesimusUnbound

Hiya;輕彈一些代碼的人，這將幫助我們無論如何看到這個希望，這有助於，http://jsfiddle.net/FWWEn/有一個不錯的，快樂！ –

你好簡單的演示從上面的意見建議：http://jsfiddle.net/FWWEn/

與暫停鼠標懸停功能：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'); })

來源

2012-05-11 08:30:37

這段代碼看起來不錯，在jsfiddle中運行良好，但是當我嘗試在本地運行它時，它似乎不起作用？有任何想法嗎？ http://pastebin.com/iDSgpJDy – Derp

Hiya @Derp我希望你已經在你的頁面中包含了像這樣的jquery src''和Jquery代碼將會進入''標籤，讓我知道它是怎麼回事！歡呼 –

是的，看看我在我的第一個評論中鏈接的pastebin，pastebin.com/iDSgpJDy我使用的是1.7.js，但不是1.5，我通過腳本標記嵌入它。不知道什麼是錯的 – Derp

以下工作：

http://jsfiddle.net/xAGRJ/4/

與你原來的代碼的問題是你是傳遞一個字符串setInterval調用scrollticker()，你應該在哪裏SS函數名，把它作爲一個變量：

lefttime = setInterval(scrollticker, 50);

，而不是

lefttime = setInterval("scrollticker()", 50);

來源

2012-05-11 08:27:48

修復了我原來的代碼，upvote和謝謝你！ – Derp

@Derp兄弟如果這樣就解決了你的問題，至少接受他的回答:)只是一個觀察，放輕鬆:)，歡呼！ –

嗯，我修正了一個，它造成了另一個，'tSpeed未定義'可能在這裏 - 'onmouseout =「cps = -tSpeed」'即時試圖修復它現在雖然。 – Derp

我做了很簡單的功能爲選取框。請參閱：http://jsfiddle.net/vivekw/pHNpk/2/ 它在mouseover上暫停&在mouseleave上繼續。速度可以變化。容易明白。

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

來源

2012-11-03 19:35:30

真棒，非常簡單，並與jQuery 1.4.2工作 – malisokan

我剛剛爲此創建了一個簡單的jQuery插件。試試吧;）

https://github.com/aamirafridi/jQuery.Marquee

來源

2013-01-11 15:00:11

鏈接工程。然而劇本非常波濤洶涌。我推薦[silky smooth marquee]（http://remysharp.com/2008/09/10/the-silky-smooth-marquee/） – Onimusha

立即嘗試。有點改進。 CSS3後備即將推出;） –

按照http://aamirafridi.com/jquery/jquery-marquee-plugin上顯示的說明進行操作。您沒有將CSS應用於選取框元素。 –

我做我自己的版本，基於由@Tats_innit上面給出的代碼。區別在於暫停功能。在這方面做得更好一點。

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

用法：

的開始：$（ '＃文本1'）選框（）

暫停：$（ '＃文本1'）選框（{暫停：真}）

簡歷：$（ '＃文本1'）選框（{暫停：假}）

來源

2014-08-08 20:12:36 BernieSF

上帝保佑我們...爲什麼要編寫自定義的跑馬燈jQuery代碼...在我沒有什麼值得生活 - 只需使用jQuery插件 - 字幕（），並使用它像在下面的例子：

首先包括：

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

如果你可以使它更簡單，更好，我親愛的你們所有人都是：不要讓你的生活比應該變得更加困難。有關此插件及其功能的更多信息，請訪問：http://aamirafridi.com/jquery/jquery-marquee-plugin

來源

2015-08-05 15:32:05 DevWL

這沒有縫IE 10和更高的工作。很奇怪。也許有人可以指出一些修復或解決方法？我被迫使用jquery 1.5.1 –

codepen URL被破壞。 – reformed

Responsive resist jQuery marquee simple plugin。教程：

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

來源

2015-08-28 19:54:51 DevWL

我的文字字幕更多的文字，和位置絕對啓用

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

來源

2016-12-08 16:10:44

非常簡單，非常流暢的JavaScript Marquee

回答

相關問題