Javascript увеличительное стекло для набора цифр - совместимость между браузерами

Я искал увеличительные стекла в Интернете, но обычно они работают только на одну картинку. Итак, я создал увеличительное стекло, которое увеличивает все изображения в определенном div. Он отлично работает в браузере Chrome, но он придает странные эффекты браузерам Firefox и Opera.

Может ли кто-нибудь помочь мне в достижении кросс-браузера с увеличительным стеклом?

Мой код:

<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, содержащий этот код, находится по адресу: https://jsfiddle.net/u7kLnhhs/5/ Спасибо.

PS. Я попытался изменить строки с увеличением на:

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

и я удалил строку:

zoom: 400%;

Затем увеличительное стекло имеет одинаковый размер во всех браузерах, но изображения не масштабируются должным образом, даже с другими формулами с учетом различных зон.

Ответы

Ответ 1

Это интересно...

Похоже, что в настройках Firefox/Opera свойства left и top зависят от свойства zoom, а в Chrome нет.

Итак, как вы уже указали, следует избегать этого свойства "масштабирования" и делать его с помощью преобразований.

Кроме того, вы можете обернуть ваши изображения в div и поместить его в соответствии с положением мыши, чтобы избежать использования foreach.

Попробуйте что-то вроде этого:

//$(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");
        }
	
        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>