Home/ Questions/Q 8694989
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:55:16+00:00

I want to implement a scroll on mouse move in jQuery. The purpose of

  • 0

I want to implement a scroll on mouse move in jQuery.

The purpose of scroll is to view the complete image.. which has appeared as Modal Popup.

This image is present as Div’s Background image.

I am able to move image up-down on mouse move using jQuery.
But the problem is the div’s background continues to scroll event after complete image is scrolled.
I have to stop this from happening.

for reference u can see:-

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

Click on the big image, a modal popup will appear. On scrolling, complete image is viewed without extra scrolling.

I am trying to achieve this.
Thanks in Advance..

Here is my code:-

Complete 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I got the solution myself….

    Here’s what I did…

    Take a Dummy image control and keep it hidden

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

    Assign the image source to the dummy image control before calling modal popup i.e. on $('#BigImage') click event.

    Also make y and rate value 0

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

    Now in the mouse move event i.e ‘moveImageZoomBox‘ function make the dummy image control visible and get the height of the image.

    In the same mouse move event take to variables as ‘scrollmin‘ and ‘scrollmax‘ and then

    scrollmin=-(height of the image) 

    scrollmax=(height of the image)/2

    Now apply condition such the the value of should be between ‘scrollmin‘ and ‘scrollmax‘

    The ‘moveImageZoomBox‘ function will look like this:

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