利用jQuery UI 实现图片局部放大

图示


与 “利用jQuery UI 实现图片部份截取 ”相同，只是代码微有调整

HTML
id="quen" 为截取框
id="c" 为整个图片框
id="e" 为截取后的框

<div style='width:732px;height:458px' id='c'>
    <div id='quen' style='position:absolute;top:0px;left:0px;border:solid 2px blue;width:100px;height:100px'>
        <div id='quen2' style='background:red;width:100%;height:100%'></div>
    </div>
    <img src='1.jpg' />
</div>
<br/><br/><br/>
<div style='position:absolute;overflow:hidden;width:200px;height:200px'>
    <div id='e' style='position:relative;'>
        <img src='1.jpg' width='1464' height='916'/>
    </div>
</div>

JS

$(function() {
    $("#quen2").css({opacity:0}); //初始化移动框为透明
    $("#quen").css({top:$("#c img").offset().top,left:$("#c img").offset().left}) //移动框的初始位置放在图片顶部
    .draggable({
        containment:"parent", //只能在父元素中拖动
        drag:function(e,ui){
            //动态改变取图框的位置
            $("#e").css({left:"-"+ui.position.left*2+"px",top:"-"+ui.position.top*2+"px"});
        }
    })
    .resizable({
        handles:"n,e,s,w,se,sw,ne,nw",
        minHeight:30,
        minWidth:30,
        maxHeight:458,
        maxWidth:732,
        resize:function(e,ui){
            //动态改变图框的大小
            $("#e").parent().css({width:ui.size.width*2,height:ui.size.height*2});
        }
    });
});

结果演示

下载范例