Szkła powiększającego dla zestawu liczb - zgodność z różnymi przeglądarkami

Question

Szukałem okularów powiększających w Internecie, ale zazwyczaj działają one tylko dla jednego obrazu. Zbudowałem więc szkło powiększające, które powiększa wszystkie obrazy w konkretnym dziale. Działa dobrze w przeglądarce Chrome, ale daje dziwne efekty w przeglądarkach Firefox i Opera.

Czy ktoś może mi pomóc w osiągnięciu kompatybilności z lupą zgodną z przeglądarką?

Mój kod to:

<style type="text/css"> 
#banners_magnifying{ 
    left: 0px; 
    border-radius: 100%; 
    border: 0px solid; 
    width: 40px; 
    height: 40px; 
    overflow: hidden; 
    position: absolute; 
    zoom: 400%; 
    -moz-transform: scale(4); 
/*multiple box shadows to achieve the glass effect*/ 
    box-shadow: 0 0 0 4px #000000, 0 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 20px 2px rgba(0, 0, 0, 0.7); 
    z-index: 1; 
    cursor: pointer; 
    visibility: hidden; 
} 
</style> 


<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script type="text/javascript"> 
$(window).load(function(){ 
//$(document).ready(function(){ 
var scale=4; 
var diameter=40; 

$("#banners_magnifying").html($("#banners").html()); 
$("#banners_magnifying img").each(function(index) { 
    var the_offset=$(this).offset(); 
    $(this).attr("left_i", the_offset.left); 
    $(this).attr("top_i", the_offset.top); 
}); 


var mousex, mousey; 

function get_mouseXY(e){   // this works on IE, FF, mozilla, opera, and NS 
    if (!e) e = window.event; 
    if (e){ 
     if (e.pageX || e.pageY){ 
      // this doesn't work on IE! (it works on the other browsers) 
      mousex = e.pageX; 
      mousey = e.pageY; 
     } 
     else if (e.clientX || e.clientY){ 
      // this works on IE, FF, mozilla, opera, and NS 
      mousex = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft; 
      mousey = e.clientY+document.body.scrollTop+document.documentElement.scrollTop; 
     } 
    } 
// mousex-=fig_x; 
// mousey-=fig_y; 
} 


$(document).mousemove(function(event){ 
     var my_canvas=$("#banners"); 
     var the_offset=my_canvas.offset(); 

     get_mouseXY(event); 
     banners_magnifying=$("#banners_magnifying"); 

     $("#coordinates").text((mousex-the_offset.left) + ", " + (mousey-the_offset.top) + "."); 

     if ((mousex>0) && (mousex<(the_offset.left+my_canvas.width())) && (mousey>0) && (mousey<(the_offset.top+my_canvas.height()))){ 
      banners_magnifying.css("visibility", "visible"); 
     } 
     else{ 
      banners_magnifying.css("visibility", "hidden"); 
     } 

     banners_magnifying.css("left", mousex/scale-diameter/2); 
     banners_magnifying.css("top", mousey/scale-diameter/2); 

     $("#banners_magnifying img").each(function(index) { 
//alert(index+": " + $(this).attr("src")); 
      var delta_x=+diameter/4; 
      var delta_y=+diameter/4; 
      $(this).css("left", $(this).attr("left_i")-event.pageX+delta_x+diameter/scale); 
      $(this).css("top", $(this).attr("top_i")-event.pageY+delta_y+diameter/scale); 

     }); 
}); 
}); 
</script> 


<div id="banners" style="width:640px; height:320px; position: absolute; left:0px; top:0px;"> 
    <img src="http://lardopikachu.home.sapo.pt/imagens/gifs_animados/raichu1.gif" style="position: absolute;"> 
    <img src="https://pokemeublog.files.wordpress.com/2014/02/abf9c-pikachu2b12-bmp.jpg?w=100" style="position: absolute; left:100px; top:40px;"> 
</div> 
<div id="banners_magnifying"> 
</div> 
<p>mouse is at coordinates: <span id="coordinates">...</span></p> 

jsfiddle zawierające ten kod jest na stronie: https://jsfiddle.net/u7kLnhhs/5/ Dziękuję.

PS. Starałem się zmieniły linie o zoom-in do:

-moz-zoom: 4; 
-ms-zoom: 4; 
-webkit-zoom: 4; 
-moz-transform: scale(4); 
-ms-transform: scale(4); 
-webkit-transform: scale(4); 
-moz-transform-origin: left top; 
-ms-transform-origin: left top; 
-webkit-transform-origin: left top; 

i usunęliśmy wiersz:

zoom: 400%; 

Następnie szkło powiększające ma ten sam rozmiar na wszystkich przeglądarkach, ale obrazy nie są powiększane poprawnie, nawet przy innych formułach uwzględniających różne strefy.

Answer 1

To ciekawe ...

Wydaje się, że w Firefox/Opera ustawienie w lewo i do góry właściwości zależy od własności „zoom”, podczas gdy w Chrome nie.

Tak więc, jak już wskazałeś, należy unikać tej właściwości "powiększania" i przekształcać ją w transformacje.

Możesz również zawinąć swoje obrazy w dziale div i ustawić zgodnie z pozycją myszy, aby uniknąć foreach.

spróbować czegoś takiego:

//$(document).ready(function(){ 
 
var scale=4; 
 
var diameter=40; 
 

 
$("#banners_magnifying").html("<div id='mcontainer'>"+$("#banners").html()+"</div>"); 
 
$("#banners_magnifying img").each(function(index) { 
 
    var the_offset=$(this).offset(); 
 
    $(this).attr("left_i", the_offset.left); 
 
    $(this).attr("top_i", the_offset.top); 
 
}); 
 

 

 
var mousex, mousey; 
 

 
function get_mouseXY(e){   // this works on IE, FF, mozilla, opera, and NS 
 
    if (!e) e = window.event; 
 
    if (e){ 
 
     if (e.pageX || e.pageY){ 
 
      // this doesn't work on IE! (it works on the other browsers) 
 
      mousex = e.pageX; 
 
      mousey = e.pageY; 
 
     } 
 
     else if (e.clientX || e.clientY){ 
 
      // this works on IE, FF, mozilla, opera, and NS 
 
      mousex = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft; 
 
      mousey = e.clientY+document.body.scrollTop+document.documentElement.scrollTop; 
 
     } 
 
    } 
 
// mousex-=fig_x; 
 
// mousey-=fig_y; 
 
} 
 

 

 
$(document).mousemove(function(event){ 
 
     var my_canvas=$("#banners"); 
 
     var the_offset=my_canvas.offset(); 
 
    
 
     get_mouseXY(event); 
 
     banners_magnifying=$("#banners_magnifying"); 
 

 
     $("#coordinates").text((mousex-the_offset.left) + ", " + (mousey-the_offset.top) + "."); 
 
    
 
     if ((mousex>0) && (mousex<(the_offset.left+my_canvas.width())) && (mousey>0) && (mousey<(the_offset.top+my_canvas.height()))){ 
 
      banners_magnifying.css("visibility", "visible"); 
 
     } 
 
     else{ 
 
      banners_magnifying.css("visibility", "hidden"); 
 
     } 
 
\t 
 
     banners_magnifying.css("left", mousex-diameter*2); 
 
     banners_magnifying.css("top", mousey-diameter*2); 
 

 

 
     $("#mcontainer").css("left",-mousex+diameter/2); 
 
     $("#mcontainer").css("top", -mousey+diameter/2); 
 
}); 
 
//});

#banners_magnifying{ 
 
    left: 0px; 
 
    border-radius: 100%; 
 
    border: 0px solid; 
 
    width: 40px; 
 
    height: 40px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    -moz-zoom: 4; 
 
    -ms-zoom: 4; 
 
    -webkit-zoom: 4; 
 
    -moz-transform: scale(4); 
 
    -ms-transform: scale(4); 
 
    -webkit-transform: scale(4); 
 
    -moz-transform-origin: left top; 
 
    -ms-transform-origin: left top; 
 
    -webkit-transform-origin: left top; 
 
/*multiple box shadows to achieve the glass effect*/ 
 
    box-shadow: 0 0 0 4px #000000, 0 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 20px 2px rgba(0, 0, 0, 0.7); 
 
    z-index: 1; 
 
    cursor: pointer; 
 
    visibility: hidden; 
 
} 
 
#mcontainer{ 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="banners" style="width:640px; height:320px; position: absolute; left:0px; top:0px;"> 
 
    <img src="http://lardopikachu.home.sapo.pt/imagens/gifs_animados/raichu1.gif" style="position: absolute;"> 
 
    <img src="https://pokemeublog.files.wordpress.com/2014/02/abf9c-pikachu2b12-bmp.jpg?w=100" style="position: absolute; left:100px; top:40px;"> 
 
</div> 
 
<div id="banners_magnifying"> 
 
</div> 
 
<p>mouse is at coordinates: <span id="coordinates">...</span></p>