0 
<script language="javascript">
$(document).ready(function($) {

    var methods = {
        init: function(options) {
            this.children(':first').stop();
            this.marquee('play');
        },
        play: function() {
            var marquee = this,
                pixelsPerSecond = 100,
                firstChild = this.children(':first'),
                totalHeight = 0,
                difference,
                duration;

            // Find the total height of the children by adding each child's height:
            this.children().each(function(index, element) {
                totalHeight += $(element).innerHeight();
            });

            // The distance the divs have to travel to reach -1 * totalHeight:
            difference = totalHeight + parseInt(firstChild.css('margin-top'), 10);

            // The duration of the animation needed to get the correct speed:
            duration = (difference/pixelsPerSecond) * 1000;

            // Animate the first child's margin-top to -1 * totalHeight:
            firstChild.animate(
                { 'margin-top': -1 * totalHeight },
                duration,
                'linear',
                function() {
                    // Move the first child back down (below the container):
                    firstChild.css('margin-top', marquee.innerHeight());
                    // Restart whole process... :)
                    marquee.marquee('play');
                }
            );
        },
        pause: function() {
            this.children(':first').stop();
        }
    };

    $.fn.marquee = function(method) {

        // Method calling logic
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.marquee');
        }

    };

})(jQuery);

var marquee = $('#marquee');

marquee.marquee();

marquee.hover(function() {
    marquee.marquee('pause');
}, function() {
    marquee.marquee('play');    
});
</script>
<style type="text/css">
#marquee {
    margin:inherit;
    width:auto;
    height:inherit 
}

</style>

jquery を使用してスクローラーを作成したいのですが、失敗します。上記のコードは、アイテムを上にスクロールするために使用するマーキーです。そして、私はそれを以下のように使用しています、

<html>
<body>
<div class="content">
<div id="marquee">
    <ul>
       <li>...</li> 
       ....
    </ul>
</div>
</div></body>
</html>

しかし、まったくスクロールしません。私が使用しているコードに何か問題がありますか?

4

1 に答える 1

0

これに対してmargin-topが機能するかどうかはわかりません。ホルダー ブロック (マーキー) には position:relative を、コンテンツ (ul) には position:absolute を使用してみてください。また、margin top の代わりに top を更新します。ただし、この場合、マーキー div の高さとオーバーフロー:非表示を指定する必要がある場合があります。もう 1 つのオプションは、マーキーの高さと oveflow:hidden を設定することですが、位置はデフォルトのままにします。また、 scrollTopまたは同様の jquery 関数を使用してコンテンツをスクロールします。

于 2012-08-21T09:31:58.953 に答える