利用jQuery UI 实现图片部份截取
图示
使用到的jquery UI有draggable,resizable
HTML
id="quen" 为截取框
id="c" 为整个图片框
id="e" 为截取后的框
JS
结果演示
下载范例
使用到的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>
<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});
}
});
});
$("#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});
}
});
});
结果演示
下载范例
Tag标签: jQueryUI
生产内容，同时打通搜索引擎（SEO）与AI搜索引擎（GEO）流量入口的软件！ 点击进入365建站器 »
