Firefox：有什么替代方法可以替换 .css("zoom")

Question

.css("zoom") 不适用于 Firefox 和 IE，但在 Chrome 上运行良好。

我的代码仅适用于 chrome：

//ZoomIn Button
    $('.zoom--actions .zoom-in').on('click', function() {
        if ( $(".img-zoom").css("zoom")==1){
            $(".img-zoom").css("zoom", "125%");
        }
        else if ( $(".img-zoom").css("zoom")==0.75){
            $(".img-zoom").css("zoom", "100%");
        }
    });

Answer 1

CSS Zoom 属性，在IE 5.5+、Opera、Safari 4和Chrome中受支持。

Firefox是唯一不支持缩放的主流浏览器，但您可以-moz-transform从 Firefox 3.5 开始使用。

div.zoom {
      zoom: 2; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}

让我们来解答一下这个问题。

试试这个片段。

div.zoom {
      zoom: 2; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}

$('.zoom--actions .zoom-in').on('click', function() {
  if ($(".img-zoom").css("zoom")==1 | $(".img-zoom").css({"-moz-transform":"scale(1)"})){
      $(".img-zoom").css("zoom", "125%").css({"-moz-transform":"scale(1.25)"});
  }
  else if (  $(".img-zoom").css("zoom")==0.75 | $(".img-zoom").css({"-moz-transform":"scale(0.75)"})){
      $(".img-zoom").css("zoom", "100%").css({"-moz-transform":"scale(1)"});
    
  }
});

.img-zoom{
  -moz-transform: scale(1);
  zoom:1;
}
.zoom--actions{
  margin:20px;
}