0

jQueryでマウス移動時のスクロールを実装したい。

スクロールの目的は、モーダル ポップアップとして表示される完全な画像を表示することです。

この画像は、Div の背景画像として表示されます。

jQueryを使用して、マウスの移動で画像を上下に移動できます。しかし、問題は、完全な画像がスクロールされた後も div の背景がイベントをスクロールし続けることです。私はこれを止めなければなりません。

参考までに：-

http://zovi.com/california-dream-t-shirt-white--S123RNM84602#2

大きな画像をクリックすると、モーダル ポップアップが表示されます。スクロールすると、追加のスクロールなしで完全な画像が表示されます。

私はこれを達成しようとしています。前もって感謝します..

これが私のコードです:-

完全な HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .backdrop
        {
            position: relative;
            height: 300px; /*could be anything really..*/
            width: 400px; /*could be anything really..*/
            border: 3px solid #6699ff;
            background: url('image/TShirt/tshirtpicZoom1.jpg') 0 0 no-repeat;

        }

        .direction
        {
            position: absolute;
            width: 50%;
            height: 100%;
        }
        .top
        {
            left: 0;
            top: 0;
            width:100%;

        }
        .bottom
        {
            left: 0;
            top: 50%;
            width:100%;
        }
    </style>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            var x = 0,
        y = 0,
        rate = 0,
        maxspeed = 10;
            var backdrop = $('.backdrop');

            $('.direction', backdrop).mousemove(function (e) {
                var $this = $(this);
                var top = $this.is('.top');

                if (top) {
                    var h = $this.height();
                    rate = (h - e.pageY - $(this).offset().top + 1) / h;
                }
                else {
                    var h = $this.height();
                    rate = -(e.pageY - $(this).offset().top + 1) / h;
                }
            });

            backdrop.hover(
        function () {
            var scroller = setInterval(moveBackdrop, 10);
            $(this).data('scroller', scroller);
        },
        function () {
            var scroller = $(this).data('scroller');
            clearInterval(scroller);
        }
    );

            function moveBackdrop() {
                y += maxspeed * rate;
                var newpos = x + 'px ' + y + 'px';

                backdrop.css('background-position', newpos);
            }
        }); 

    </script>
</head>
<body>
    <div class="backdrop">
        <div class="direction top">
        </div>
        <div class="direction bottom">
        </div>
    </div>
</body>
</html>
4

1 に答える 1

0

私は自分で解決策を得ました....

これが私がしたことです...

ダミー イメージ コントロールを取得し、非表示のままにします

<img id="DummyImage" class="hidden" />

$('#BigImage')モーダル ポップアップ、つまりクリック イベントを呼び出す前に、イメージ ソースをダミー イメージ コントロールに割り当て ます。

また、y とレート値を 0 にします。

y = 0;
rate = 0;
$("#DummyImage").attr('src', imageSrc);

マウス移動イベント、つまり ' moveImageZoomBox' 関数で、ダミーの画像コントロールを表示し、画像の高さを取得します。

同じマウス移動イベントで、' scrollmin' および ' scrollmax' として変数を取得し、次に

scrollmin=-(height of the image) 

scrollmax=(height of the image)/2

scrollminの値が ' ' と ' scrollmax'の間にあるような条件を適用します

' moveImageZoomBox' 関数は次のようになります。

function moveImageZoomBox() {
                y += maxspeed * rate;
                var ScrollYMin = 0;
                var ScrollYMax = 0;
                var tths = this;
                $("#DummyImage").show();

                ScrollYMin = -($("#DummyImage")[0].naturalHeight-300);//in order to stop scrolling whole image up
                ScrollYMax = $("#DummyImage")[0].naturalHeight / 2-200;//in order to stop scrolling whole image down

                $("#DummyImage").hide();

                var newpos = x + ' ' + y + 'px';
                if (y > ScrollYMin && y < ScrollYMax) {
                    imageZoomBox.css('background-position', newpos);
                }
                else {
                    y -= maxspeed * rate;
                }
            }
于 2012-10-17T06:40:20.630 に答える