javascript - 使用jquery滚动太长的文本

Question

我正在尝试在线创建音乐播放器/中心。

我有一个播放音乐并显示当前曲目的播放器：

从歌曲的标题可以看出，对于 div 来说太长了。我想做的是滚动文本并将其重置为重新滚动等。

我用下面的代码尝试了这个：

html:

<div id="top-bar">
<div id="player-container">
        <div id="player">
          <div id="level1">
            <div class="current-track"><h1><span id="title">Party All Night (Sleep All Day) -</span> Sean Kingston</h1></div>
            <div class="add-to-playlist"></div>
            <div class="share"></div>
          </div>
          <div class="clearfix"></div>
          <div id="level2">
            <div class="current-time">0:00</div>
            <div class="progress"><span id="slider"></span></div>
            <div class="total-time">3:43</div>
          </div>
        </div>
  </div>
</div>

查询：

$(function() {
    var scroll_text;
    $('div.current-track').hover(

    function() {
        var $elmt = $(this);
        scroll_text = setInterval(function() {
            scrollText($elmt);
        }, 5);
    }, function() {
        clearInterval(scroll_text);
        $(this).find('div.current-track h1').css({
            left: 0
        });
    });

    var scrollText = function($elmt) {
        var left = $elmt.find('div.current-track h1').position().left - 1;
        left = -left > $elmt.find('div.current-track h1').width() ? $elmt.find('div.current-track').width() : left;
        $elmt.find('div.current-track h1').css({
            left: left
        });
    };

});​​

任何指针都会被应用

这是给你们的一个jsfiddle： JSfiddle

更新

谁能告诉我：

1. 如何使这种情况自动发生？ 完毕
2. 如何减慢滚动速度？ 完毕

这是为你们更新的 jsfiddle： JSfiddle

Answer 1

我认为您误解了jquery .find()的工作原理：

$elmt.find('div.current-track h1')

应该：

$elmt.find('h1')

http://jsfiddle.net/Dn6jx/5/

编辑：更新小提琴的评论

http://jsfiddle.net/Dn6jx/15/

Answer 2

添加了检查以查看文本是否足够长以需要滚动，删除了清除间隔，并包含在插件中。

JSFiddle 更新

$.fn.scrolltxt = function() {
    var options = $.extend({
        speed : 28
    }, arguments[0] || {});

    return this.each(function() {
        var el = $(this);

        if( el.find('span').width() > el.parent().width() ) {
            var scroll_text = setInterval(function() {
                scrollText();
            }, options.speed);
        };      

        var scrollText = function() {
            var width = el.width(),                
                left = el.position().left - 1;
            left = -left > width ? width : left;
            el.css({left: left});
        };
    });    };

$('.current-track h1').scrolltxt();

Answer 3

为文本设置动画的更好方法（当文本完全阅读 => 重新设置动画时）：

JSFiddle 更新

$.fn.scrolltxt = function() {
    var options = $.extend({
        speed : 28
    }, arguments[0] || {});

    return this.each(function() {
        var el = $(this);

        if( el.find('span').width() > el.parent().width() ) {
            var scroll_text = setInterval(function() {
                scrollText();
            }, options.speed);
        };      

        var scrollText = function() {
            var width = el.find('span').width(),
                left = el.position().left - 1;
            left = -left > width ? el.width() : left;
            el.css({left: left});
        };
    });
};

$(function() {
    $('.current-track h1').scrolltxt();
});