0

<ul>固定の高さのリスト アイテムを含む固定の高さの順序付けられていないリストがあります。<li>

私の ul の高さは 600px で、高さ 40px の 200 個の li アイテムが含まれています。

マウスがリストの一番下に置かれたときにリストを下にスクロールし、マウスがリストの上に置かれたときに上にスクロールするスクリプトを作成する必要があります。

私はこれを試しました: http://archive.plugins.jquery.com/project/hoverscroll しかし、本来あるべきほどスムーズではないので、カスタムのものを作成する必要があります (jQuery をまったく使用していない可能性があります)。

アイデアや例はありますか？どうすれば目的の効果を達成できますか?

ありがとう

4

2 に答える 2

0

画面をグリッドに分割してみませんか? mouseX と mouseY が上部のグリッドに達すると、定義済みの整数値で上にスクロールします

于 2012-04-11T14:44:13.350 に答える
0

$wrapper.animate({scrollTop: step}); を使用してみてください。たとえば、JS:

var isScroll = false;

    $(document).ready(function () {
        $('#up').hover(function () {
            isScroll = true;
            gotoNext(true);
        }, function () { isScroll = false; });
        $('#down').hover(function () {
            isScroll = true;
            gotoNext(false);
        }, function () { isScroll = false; });
    });

    function gotoNext(dir) {
        if (isScroll) {
            isScroll = true;
            var step = dir ? '-=20' : '+=20';
            $('#wrapper').animate({
                scrollTop: step
            }, 200, "linear");
            setTimeout(function () { gotoNext(dir); }, 200);
        }
    }

HTML:

<div style="height:10px; background:green; width:200px;" id="up"></div>
<div style="height:200px; overflow:auto; width:200px;" id='wrapper'>
<ul>
<li style="height:30px;">1</li>
<li style="height:30px;">2</li>
<li style="height:30px;">3</li>
<li style="height:30px;">4</li>
<li style="height:30px;">5</li>
<li style="height:30px;">6</li>
<li style="height:30px;">7</li>
<li style="height:30px;">8</li>
<li style="height:30px;">9</li>
<li style="height:30px;">1</li>
<li style="height:30px;">2</li>
<li style="height:30px;">3</li>
<li style="height:30px;">4</li>
<li style="height:30px;">5</li>
<li style="height:30px;">6</li>
</ul>
</div>
<div style="height:10px; background:green; width:200px;"  id="down"></div>

それは私にとってかなり良さそうです

于 2012-04-11T15:26:19.713 に答える