Question

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

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

The Player

正如你从歌曲的标题中看到的那样，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>

Jquery的：

$(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

更新

有人可以告诉我：

如何自动完成此操作？ 完成
如何减慢滚动速度？ 完成

以下是您的更新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 update

$.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

为文本设置动画的更好方法（文本完全读取时=＆gt;重新制作动画）：

JSFiddle update

$.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();
});

使用jquery滚动文本太长

3 个答案: