by zhangxinxu 2009-11-12 13:23

Jcrop照片剪裁插件基本事件程序演示

基本事件处理程序实例。这里将一些表单值绑定到了事件处理程序上，当选择或大小改变的时候，表单内的值也会发生实时的改变，x1,y1表示左上角坐标，x2,y2表示右下角坐标，w,h表示剪裁的高度和宽度。多亏了Jcrop的onChange事件处理程序，一切才得以实现。

<< 返回Demo实例首页

JavaScript代码

$(document).ready(function(){ //记得放在jQuery(window).load(...)内调用，否则Jcrop无法正确初始化 $("#xuwanting").Jcrop({ onChange:showCoords, onSelect:showCoords }); //简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用 function showCoords(obj){ $("#x1").val(obj.x); $("#y1").val(obj.y); $("#x2").val(obj.x2); $("#y2").val(obj.y2); $("#w").val(obj.w); $("#h").val(obj.h); } });