我有兩個問題！一個是打印，另一個是縮放

Question

我想在圖片上打印一個功能。所以這些都是代碼

<li> 
<a href="#" class="print_btn"><img src="../picture/util_print.gif" alt=""></a> 
</li> 

了jQuery，我這個編碼下面

$(".print_btn").on("click",function(){ 
    window.print(); 
    return false; 
}) 

但什麼也沒有發生，我不知道爲什麼。 同樣在放大和縮小代碼

<ul id="zoom"> 
<li> 
<a href="#" class="zoom_in"><img src="../picture/util_zoom_2.gif" alt=""></a> 
</li> 
<li> 
<a href="#" class="zoom_out"><img src="../picture/util_zoom_4.gif" alt=""></a> 
</li> 
</ul> 

在javascript代碼，我輸入

var base=100; 
var mybody=$("body"); 

$("#zoom a").on("click",function() { 
    var zNum=$("#zoom a").index(this); 
    if (zNum == 0) { 
     base += 10; 
    } else if (zNum == 1) { //100% 
     base = 100; 
    } else { 
     base-=10; 
    } 
    mybody 
    .css("overflow-x","auto") 
    .css("transform-origin","0 0") 
    .css("transform","scale("+base/100+")") 
    .css("zoom",base+"%"); 
    return false; 
}); 

什麼也沒有發生，我仍然不明白爲什麼。 任何人都可以幫助我嗎？

Answer 1

打印解決方案使用此代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('img').click(function() { 
      window.print(); 
      return false; 
     }); 
    }); 
</script> 

<div><img src="#" onclick="window.print(); return false;"></div> 

對於變焦的解決方案使用此代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<div>abc</div> 
<button type="button" id="zoom-in">zoom in</button> 
<button type="button" id="zoom-out">zoom out</button> 
<script> 
    $('#zoom-in').click(function() { 
     updateZoom(0.1); 
    }); 

    $('#zoom-out').click(function() { 
     updateZoom(-0.1); 
    }); 


    zoomLevel = 1; 

    var updateZoom = function(zoom) { 
     zoomLevel += zoom; 
     $('body').css({ 
      zoom: zoomLevel, 
      '-moz-transform': 'scale(' + zoomLevel + ')' 
     }); 
    } 
</script> 

Answer 2

嘗試與此下面的代碼，它可以幫助你解決這個問題。

$(".print_btn img").click(function(){ 
 
    window.print(); 
 
    return false; 
 
    }); 
 

 
$("#zoom a").on("click",function() { 
 
    var base=100; 
 
    var mybody=$("body"); 
 
    var zNum=$("#zoom a").index(this); 
 
    if (zNum == 0) { 
 
     base += 10; 
 
    } else if (zNum == 1) { //100% 
 
    } else { 
 
     base-=10; 
 
    } 
 
    mybody 
 
    .css("overflow-x","auto") 
 
    .css("transform-origin","0 0") 
 
    .css("transform","scale("+base/100+")") 
 
    .css("zoom",base+"%"); 
 
    return false; 
 
});

.print_btn img{height : 100px; width : 100px;} 
 

 
#zoom a img {height : 100px; width : 100px;} 
 
li {list-style-type : none;} 
 
#zoom a{text-decoration : none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<li> 
 
<a href="#" class="print_btn"><img src="https://www.sdc.com.jo/arabic/images/printer-icon.png" alt=""></a> 
 
</li> 
 

 

 
<ul id="zoom"> 
 
<li> 
 
<a href="#" class="zoom_in"><img src="http://www.pngimagesfree.com/Globe/3d-Globe-png.png" alt=""> Zoom In :)</a> 
 
</li> 
 
<li> 
 
<a href="#" class="zoom_out"><img src="http://a826.phobos.apple.com/us/r1000/068/Purple/v4/e8/d6/1e/e8d61ef2-ea99-2562-b41e-fae6e92dd838/mzl.wdxfapbe.png" alt=""> Zoom Out :(</a> 
 
</li> 
 
</ul>