0

我想在 jQuery 中实现鼠标移动滚动。

滚动的目的是查看完整的图像.. 以 Modal Popup 的形式出现。

此图像显示为 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 和 rate 值为 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 回答