一组图形的 Javascript 放大镜 - 跨浏览器兼容性

Question

我在网上搜索过放大镜，但通常它们只适用于一张照片。所以，我做了一个放大镜，可以放大特定 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>

包含此代码的 jsfiddle 位于:https://jsfiddle.net/sjg6w1zx/谢谢。

编辑:图片自原始帖子以来已被替换，以避免链接断开，并且包含一组两个数字:一个普通的和一个透明背景。

附言。我试图将有关放大的行更改为:

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

然后，放大镜在所有浏览器中具有相同的大小，但图像没有正确放大，即使使用其他公式考虑了不同的区域也是如此。

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