Question

我想在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>

Answer 1

我自己得到了解决方案......

这就是我做的......

拍摄虚拟图像控件并将其隐藏

<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;
                }
            }

在jQuery中实现鼠标移动滚动

1 个答案: