javascript - 我有两个问题!一个是打印，另一个是缩放

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>