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

图示

使用到的jquery UI有draggable,resizable

HTML

id="quen" 为截取框

id="c" 为整个图片框

id="e" 为截取后的框

<div style='width:100%;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>

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

    });

});