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

Print Solution使用以下代码：

var allElements = document.querySelectorAll("*");
for ( var counter = 0; counter < allElements.length; counter++)
{
   allElements[counter].addEventListener('click',function(ele){

       alert("id is " + this.id );
       alert("class is " this.className);

    });
}

对于缩放解决方案，请使用以下代码：

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

Answer 2

尝试使用以下代码，它可以帮助您解决问题。

＆＃13;

$(".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;
});

＆＃13;

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

＆＃13;

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

＆＃13;

我有两个问题！一个是打印，另一个是缩放

2 个答案: