利用jQuery UI 实现图片部份截取

图示



使用到的jquery UI有draggable,resizable

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:200px;height:200px'>
        <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' />
    </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+"px",top:"-"+ui.position.top+"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,height:ui.size.height});
        }
    });
});

结果演示
下载范例