Hello everyone, I apologize in advance for the example from the adult site, but I have not seen anything like it anywhere else.

An example on the site xuk.net (adult site). On a website, when you click on a magnifying glass, the image becomes larger than the window size and you can move the cursor along it, it goes up or down or sideways, thereby moving the enlarged area of ​​the image to the whole window.

How to implement such an increase or how to tear off the script? Everything is hidden, similar and encrypted.

Closed due to the fact that the essence of the question is incomprehensible by the participants Alexey Shimansky , D-side , Bald , Kromster , user194374 July 22, 16 at 5:59 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

    2 answers 2

    If you don’t really go into the nuances, here’s a primitive example :

    $('.preview').on('click', function() { $(this).toggleClass('fullsize').find('img').attr('style', ''); }); $(document).on('mousemove', '.fullsize', function(e) { var img = $('img', this), docW = $(document).width(), docH = $(document).height(), factorX = (img.width() - docW) / docW, factorY = (img.height() - docH) / docH; img.css({ marginLeft: -(e.pageX * factorX), marginTop: -(e.pageY * factorY) }); }); 
     * { margin: 0; padding: 0; } .preview { width: 200px; cursor: pointer; } .preview img { max-width: 100%; } .fullsize { position: fixed; top: 0; left: 0; width: 100%; z-index: 100500; } .preview.fullsize img { max-width: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="preview"> <img src="http://www.sunhome.ru/UsersGallery/wallpapers/20/4142919.jpg" alt=""> </div> <div class="preview"> <img src="http://ru-wallp.com/w/2010/1/13/873884-wp-1245737192208.jpg" alt=""> </div>

    • And if you expand the example to the whole page? - user207618 pm
    • one
      @Other, do a simple check: if the image is smaller or equal to the screen size, then the actions are not performed. - Deonis
    • Everything is fine, but in the example the moment is not taken into account, if the HTML size is larger than the image size, then x and y are not calculated correctly. What formula to use to take this into account? - Barin
    • @ Barin, no formula, in this case, is to be used, and I wrote about it yesterday. See the comment before your own. - Deonis
    • @Deonis, I made an example of yours, increased the page height. jsfiddle.net/guxd9847/1 Now click on the zoom and you will see that the image is no longer moving correctly, the coordinates have moved. - Barin

    In case HTML is larger than a window, then glitches occur with scrolling. What formula can be made that there would be no such problems?

    I fixed this bug with the help of a scroll, I unscrew the picture up to 0, and after closing it I return the previous scrollTop, but this is not very reliable (

      $('.zoomer').on('click', function() { $(this).toggleClass('fullsize').find('img').attr('style', ''); if (scroll>0) {$(window).scrollTop(scroll); scroll=0; } else { scroll=$(window).scrollTop(); } }); $(document).on('mousemove', '.fullsize', function(e) { var img = $('img', this), docW = document.documentElement.clientWidth, docH = document.documentElement.clientHeight, factorX = (img.width() - docW) / docW, factorY = (img.height() - docH) / docH; $(window).scrollTop(0); img.css({ marginLeft: -(e.pageX * factorX), marginTop: -(e.pageY * factorY) }); });