Question

互联网上最常见的答案是使用Marquee，但我被告知它已经过时并且有问题。但是无论如何我都去了它，现在我无法让它工作，这引出了一个问题，如何让文本向上滚动，确保镜头方法正常工作？我现在的代码有时会工作，有时它不起作用。滚动回到可见性也需要很长时间。

我的另一个要求是，如果文本行只是一行，则不要滚动。我怎样才能做到这一点？

这是我到目前为止所做的：

<div class="message_div" style="height:1em; left: 136px; bottom:0px; overflow: hidden; position: absolute; background: white; box-sizing: border-box;">
  <span class="message">{% for message in product|product_message:request.user %} {{message.message|safe}} {% endfor %}</span>
</div>

<script>
function message_function()
{
    var th = $(this);
    var ih = $(this).outerHeight(); // outer height
    var oh = $(this).find('.message').outerHeight(); // inner height
    var txt = $(this).find('.message').html(); // so that the inline styles remains the same
    if (oh > ih)
    {
        th.html('');
        th.html('<marquee class="message" direction="up" scrollamount="1" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">' + txt + '</marquee>')
    }
}

($('.message_div').each(message_function));

</script>

Answer 1

下面：

http://jsfiddle.net/hmPPe/338/

我调整它以便它只使用一个段落。

<强> JS

(function($){

    $.fn.rollup = function ( options ) {

        var settings = $.extend( {
            $wrapper : this,
            $content : $('.scrolling-div-content'),
            speed : 5000
        }, options);

        return this.each( function(){

            var $content = settings.$content,
                $content_height = $content.height(),
                $wrapper = settings.$wrapper,
                $wrapper_height = $wrapper.height(),
                $clone = $content.clone(),
                $merge = $.merge( $content, $clone );

            $wrapper.append( $clone );

            function rollUp () {
                $merge.animate({
                    top : -( $content_height ),
                }, settings.speed, 'linear', function () {
                    $merge.css({
                        top : 0
                    });
                    rollUp();
                });
        }

        rollUp();

        });
    };
})(jQuery)

$('.scrolling-div').rollup({speed:2000});

<强> HTML

  <div class="scrolling-div">
  <div class="scrolling-div-content">
    <p>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
      1<br>
    </p>
    </div>
<div>

<强> CSS

.scrolling-div{
  height:100px;
  overflow:hidden;
  position:relative;
  border:1px solid #333;
}
.scrolling-div-content{
  position:relative;
}

如何将文本向上滚动？

1 个答案: