zoom插件关于动态请求图片

最新推荐文章于 2025-05-22 23:49:05 发布

reactL

最新推荐文章于 2025-05-22 23:49:05 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/reactL/article/details/79643679

版权

本文介绍了在Zoom插件中如何处理动态请求图片的流程，包括从服务器获取图片资源，实现图片的动态加载和更新，以及在不同场景下的优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/e-smart-zoom-jquery.min.js"></script>

    function zoomButtonClickHandler(e){
      var scaleToAdd = 0.8;
      if(e.target.id == 'zoomOutButton')
          scaleToAdd = -scaleToAdd;
          $('#img').smartZoom('zoom', scaleToAdd);
    }
    function moveButtonClickHandler(e){
        var pixelsToMoveOnX = 0;
        var pixelsToMoveOnY = 0;


        switch(e.target.id){
            case "leftPositionMap":
                pixelsToMoveOnX = 50;
            break;
            case "rightPositionMap":
                pixelsToMoveOnX = -50;
            break;
            case "topPositionMap":
                pixelsToMoveOnY = 50;
            break;
            case "bottomPositionMap":
                pixelsToMoveOnY = -50;
            break;
        }
        $('#img').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
    }

function findData() {
    $.ajax({
        type: "get",
        url: "url",
        data:{
            pramas
        },
        success: function(data){
            $("#img").attr("src",'data.xxxxx');
            $("#img").load(function(){
            $('#img').smartZoom({'containerClass':'zoomableContainer'});
            $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
            $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);
        })
}

<div class="pic_views">
<div id="picContent">
<div id="imgContainer"> <img id="img"/> </div>
<div id="positionButtonDiv">
    <p>
        <span> 
            <img id="zoomInButton" class="zoomButton" src="../images/zoomIn.png" title="放大" alt="放大" /> 
            <img id="zoomOutButton" class="zoomButton" src="../images/ZoomOut.png" title="缩小" alt="缩小" /> 
        </span>
    </p>
    <p>
        <span class="positionButtonSpan">
        <map name="positionMap" class="positionMapClass">
        <area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
        <area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
        <area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
        <area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
        </map>
        <img src="../images/position.png" usemap="#positionMap" id="imgvalue" /> </span> 
    </p>
</div>
</div>        
</div>

zoom动态加载图片，图片加载完成时缩放才正常可用。所以需要添加load方法！