jquery panzoom插件默认缩放?

时间:2016-05-19 05:38:00

标签: jquery jquery-plugins jquery.panzoom

您好我正在使用Jquery Panzoom插件放大并缩小我的图像,Plugin Link

我想自己设置其defualt缩放值

enter image description here

请告诉我如何更改此默认缩放值,我无法使用此插件API找到?请帮忙 ?感谢

1 个答案:

答案 0 :(得分:1)

我觉得如果你不使用它会更好,你可以编写一个缩放代码,它有你想要的所有功能,我在项目中使用了panzoom作为流,但它有很多问题,比如滞后和没有理由,你可以使用这样的东西:

  <button onclick="iplus();" >zoom in</button>
<button onclick="iminus();">zoom out</button>
<button onclick="resetzoom();">reset</button>


<div id="mb" class="content" style="width: 800px; height: 800px; cursor: grab; cursor: -o-grab; cursor: -moz-grab; cursor: -webkit-grab; " onclick="iplus();">
    <object data="./1.mp4" width="100" height="200" id="mim" style="overflow: scroll"></object>
</div>
<script type="text/javascript">
    var i = 200;
    function mscale() {

        //$("mim").setStyle = ("trasform", "scale(10,10)");
        document.getElementById("mim").style.zoom=i+"%";
    }
    function iplus() {
        i += 20;
        mscale();
    }

    function resetzoom() {
        document.getElementById("mim").style.zoom = "100%";
    }
    function iminus() {
        i -= 20;
        mscale();
    }

    if (document.getElementById("mb").addEventListener) {
        mb.addEventListener("mousewheel", MouseWheelHandler, false);
    }
    function MouseWheelHandler(event) {
        var delta = 0;
        if (!event) 
            event = window.event;
        if (event.wheelDelta) { 
            delta = event.wheelDelta / 120;
        } 

        if (delta) {
            if (delta > 0) {
                i += 20;
                mscale();
            }
            if (delta < 0) {
                i -= 20;
                mscale();
            }
          }
        if (event.preventDefault)
            event.preventDefault();
        event.returnValue = false;
    }
</script>

如果你想用手绘工具进行拖动滚动,你可以使用this