Javascript Lupe für eine Reihe von Zahlen - Cross-Browser-Kompatibilität

Question

Ich habe für Lupen im Internet gesucht, aber in der Regel funktionieren sie nur für ein Bild. Also, ich habe eine Lupe gebaut, die alle Bilder in einem bestimmten Div vergrößert. Es funktioniert gut in Chrome-Browser, aber es gibt seltsame Auswirkungen auf Firefox und Opera-Browser.

Kann mir jemand helfen, ein Vergrößerungsglas Cross-Browser kompatibel zu erreichen?

Mein Code ist:

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

A jsfiddle diesen Code enthält, ist unter: https://jsfiddle.net/u7kLnhhs/5/ Danke.

PS. Ich habe an veränderte die Linien versucht, über Zoom-in:

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

und ich habe die Linie entfernt:

zoom: 400%; 

Dann wird das Vergrößerungsglas die gleiche Größe in allen Browsern, aber Die Bilder werden nicht richtig eingezoomt, auch nicht mit anderen Formeln, die die verschiedenen Zonen berücksichtigen.

Answer 1

Das ist interessant ...

Es scheint, dass in Firefox/Opera Einstellung links und oben Eigenschaften hängen von der ‚Zoom‘ Eigenschaft, während in Chrome nicht.

Also, wie Sie bereits hingewiesen haben, sollten Sie diese "Zoom" -Eigenschaft vermeiden und es mit Transformationen machen.

Sie können auch Ihre Bilder in ein Div und wickeln Sie es entsprechend der Mausposition, so dass Sie die Foreach vermeiden.

versuchen, etwas wie folgt aus:

//$(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>