by zhangxinxu 2009-11-12 15:21

Jcrop照片剪裁插件API演示/动画效果

API功能演示。单击上面的按钮显示不同的动画效果,这是比较初级的API演示Demo,增加了一些额外功能的API演示见(高级API的演示)。

<< 返回Demo实例首页

JavaScript代码
$(document).ready(function(){ //初始化一个剪裁大小,左上角坐标(100,100),右下角为(200,200) var api = $.Jcrop("#xuwanting",{ setSelect: [100,100,200,200] //setSelect是Jcrop插件内部已定义的运动方法 }); var i, ac; //处理程序阻止事件的进行 function nothing(e){ e.stopPropagation(); e.preventDefault(); return false; }; //返回动画回调的事件处理程序 function anim_handler(ac){ return function(e){ api.animateTo(ac); return nothing(e); }; }; //设置一些动画的坐标 var ac = { animate1:[50,50,450,320], animate2:[74,81,218,228], animate3:[8,8,32,360], animate4:[316,150,470,230], animate5:[80,160,500,190] }; //附加相应的事件处理程序 for(var i in ac){ $("#"+i).click(anim_handler(ac[i])); } //单击“重新设置”按钮后 $("#reset").click(function(e){ api.setSelect([200,125,300,225]); return nothing(e); }); });
关闭
关闭