最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-08-02 07:11浏览(1715)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

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

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

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