[英]Javascript magnifying glass for a set of figures - cross-browser compatibility
I have searched for magnifying glasses on the web, but usually they only work for one picture.我在网上搜索过放大镜,但通常它们只能用于一张照片。 So, I have built a magnifying glass that magnifies all the pictures in a specific div.因此,我构建了一个放大镜,可以放大特定 div 中的所有图片。 It works well on Chrome browser, but it gives strange effects on Firefox and Opera browsers.它在 Chrome 浏览器上运行良好,但在 Firefox 和 Opera 浏览器上会产生奇怪的效果。
Can anyone help me in reaching a magnifying glass cross-browser compatible?任何人都可以帮助我实现跨浏览器兼容的放大镜吗?
My code is:我的代码是:
<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 containing this code is at: https://jsfiddle.net/sjg6w1zx/ Thank you.包含此代码的 jsfiddle 位于: https ://jsfiddle.net/sjg6w1zx/ 谢谢。
EDIT: the images were replaced since the original post, to avoid broken links, and this contains a set of two figures: one common and one with transparent background.编辑:自原始帖子以来,图像已被替换,以避免链接断开,其中包含一组两个图形:一个常见的和一个具有透明背景的。
PS.附注。 I've tried to changed the lines about zoom-in to:我试图将有关放大的行更改为:
-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;
and I've removed the line:我已经删除了这一行:
zoom: 400%;
Then, the magnifying glass has the same size across all browsers, but the images are not zoomed-in properly, even with other formulas taking into account the different zones.然后,放大镜在所有浏览器中具有相同的大小,但图像没有正确放大,即使使用其他公式考虑到不同区域也是如此。
That's interesting...那很有意思...
It seems that in Firefox/Opera setting left and top properties depends on the 'zoom' property while in Chrome doesn't.似乎在 Firefox/Opera 中设置 left 和 top 属性取决于“缩放”属性,而在 Chrome 中则不然。
So, as you already pointed, should avoid this 'zoom' property and make it with transforms.因此,正如您已经指出的那样,应该避免使用这种“缩放”属性并使用变换来实现。
Also, you could wrap your images in a div and position it according with the mouse position so you avoid the foreach.此外,您可以将图像包装在一个 div 中并根据鼠标位置定位它,这样您就可以避免 foreach。
Try something like this:尝试这样的事情:
//$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.