最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jQuery头像左右动画旋转并支持裁剪

来源:http://www.erdangjiade.com/ 二当家的 2016-08-02 07:11浏览(1646)

分享一款左右旋转的头像插件,而且支持放大镜拖动图片剪切,并且生成两种不同尺寸的图片。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery头像左右动画旋转并支持裁剪
分类:其它特效 > jQuery插件 难易:高级
查看演示 下载资源: 124

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

头像旋转和裁剪html代码

<div class="portrait_left"> 
    <div id="picture">
        <img id="avatar" alt="请上传头像" src="images/Koala_cropped.jpg" />
    </div> 
    <form id="crop_form" method="post" action="."> 
        <!--通过生成尺寸和旋转角度 后台获取尺寸和旋转角度再进行裁剪--> 
        <input id="id_top" type="hidden" name="top" value="90" /> 
        <input id="id_left" type="hidden" name="left" value="61" /> 
        <input id="id_right" type="hidden" name="right" value="201" /> 
        <input id="id_bottom" type="hidden" name="bottom" value="200" /> 
        <input id="rotation" type="hidden" value="0" name="rotation" /> 
    </form> 
    <div class="portrait_revolve"> 
        <div class="revolve_left"></div> 
        <a href="javascript:;" class="revol_left_txt" onclick="avatarrotateleft();">向左旋转</a> 
        <a href="javascript:;" class="revol_right_txt" onclick="avatarrotateright();">向右旋转</a> 
        <div class="revolve_right"></div> 
    </div> 
    <div class="setup_but">
        <button class="baseinf_but1" onclick="submit_avatar();">确定</button>
    </div> 
</div> 
<div class="portrait_right"> 
    <p class="portrait_right_txt">您上传的头像会自动生成小尺寸头像,请注意小尺寸的头像是否清晰</p> 
    <div class="portrait_right_bottom"> 
        <div class="portrait1"> 
            <div id="img_big_preview" class="img_preview">
                <img id="avatar1" alt="头像预览" src="images/Koala_cropped.jpg" style="width:360px;height:360px;margin-left:-117px;margin-top:-44px;" />
            </div> 
            <p>大尺寸头像,180&times;180</p> 
        </div> 
    </div> 
    <div class="portrait2"> 
        <div id="img_small_preview" class="img_preview">
            <img id="avatar2" alt="预览" src="images/Koala_cropped.jpg" style="width: 98px; height: 98px; margin-left: -32px; margin-top: -12px;" />
        </div> 
        <p>中尺寸头像</p> 
        <p>50&times;50</p> 
    </div> 
</div>
$(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();
}
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/918.html
评论2
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 椅子
    03-28 08:22
    ngu137
    裁剪图片功能还不错啊
  • 头像 沙发
    09-21 16:27
    yunxiaoxue027
    不错啊 学习学习
1 2