利用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 });
        }
    });
});

结果演示

下载范例

转载于:https://www.cnblogs.com/fdszlzl/archive/2009/07/23/1529039.html