是一款效果非常棒和非常实用的jquery特效,实现了图片左右旋转在线裁剪jquery插件,生成不同规格的略缩图,可以自定义,主要配合了两种jquery插件:1、jquery旋转插件jQueryRotate;2、jquery截图插件jquery.imgareaselect,
首先引用文件
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css">
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="scripts/jQueryRotate.js"></script>
一款图片截取+预览功能的jquery插件功能强大得多了,以前只有预览截取部分的图片,而这款包括了多了以下功能: 1、图片左右旋转 2、生成不同规格的图片略缩图
$(document).ready(function (){
function adjust(el, selection) {
var scaleX = $(el).width() / (selection.width || 1);
var scaleY = $(el).height() / (selection.width || 1);
$(el+' img').css({
width: Math.round(scaleX*$('#avatar').width() ) + 'px',
height: Math.round(scaleY*$('#avatar').height() ) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
function preview(img, selection) {
adjust('#img_small_preview', selection);
adjust('#img_big_preview', selection);
}
$('img#avatar').imgAreaSelect({
aspectRatio: "4:4",
x1: 60,
y1:60,
x2: 200,
y2: 200,
onSelectEnd:function(img, selection) {
$('#id_top').val(selection.y1);
$('#id_left').val(selection.x1);
$('#id_right').val(selection.x2);
$('#id_bottom').val(selection.y2);
},
onSelectChange: preview
});
});
var value = 0;
function avatarrotateleft(){
value -=90;
$('#avatar').rotate({ animateTo:value});
$('#avatar1').rotate({ animateTo:value});
$('#avatar2').rotate({ animateTo:value});
}
function avatarrotateright(){
value +=90;
$('#avatar').rotate({ animateTo:value});
$('#avatar1').rotate({ animateTo:value});
$('#avatar2').rotate({ animateTo:value});
}
function select_avatar(){
$('#avatar_id').click();
}
function uploadavatar(){
$('#avatar_form').submit();
}
function submit_avatar(){
$('#rotation').val(value);
alert('修改成功');
$('#crop_form').submit();
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791