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