关于
这个和以前弄的图片远处放大有许多相同的地方，比如图片预加载、有限容器显示无限大图片。
大小计算：内外两个比例。 复制代码
代码如下: // 容器比例和图片比例 var dr = dw/dh, ir = iw/ih; if{ ih = dh;
iw = ih * ir; }else{ iw = dw; ih = iw / ir; }
居中显示：CSS绝对定位，负边距。 复制代码
代码如下:
$img.css({width:iw,height:ih,position:’absolute’,top:’50%’,left:’50%’,marginLeft:-iw/2,marginTop:-ih/2})
加载中和加载出错：可自定义的参数。 HTML容器：

            rx2 = 40 / c.w,

如何使用： 复制代码 代码如下:
$(‘div.jq-img-autoresize’).imgAutoResizer({ loading : function .text; }
,error : function .text; 所有代码：复制代码 代码如下: /* * 图片等比缩放 * @by
ambar * @create 2010-11-17 * @update 2010-11-17 */
$.fn.imgAutoResizer = function { return this.each { var opt = $.extend({
sizeAttr : ‘data-img-size’ ,srcAttr : ‘data-img-url’ ,error : null
,loading : null }, options || {}); var $el = $, src = $el.attr, size =
$el.attr.split; // 容器宽高 var dw = size[0], dh = size[1]; var $img
= $(”, { src : src }), img = $img[0]; var autoresize = function () {
if($el.data return; // 图片宽高 var iw = img.width, ih = img.height; if
return; // 比例 var dr = dw/dh, ir = iw/ih; if( !{ if{ ih = dh; iw = ih
* ir; }else{ iw = dw; ih = iw / ir; } } // console.log;
$el.data.css({position:’relative’,width:dw,height:dh,overflow:’hidden’});
$img.css({width:iw,height:ih,position:’absolute’,top:’50%’,left:’50%’,marginLeft:-iw/2,marginTop:-ih/2}).appendTo;
}; $img .load .error { if($.isFunction opt.error.call; if{ if(img.width
&& img.height) autoresize(); }else{ if($.isFunction opt.loading.call };
演示地址:

        img2 = $(“#real”),

            pre_img($(‘.pre-2 img’), rx, oh, ry, ow, cx, cy, 73, 90);

    obj.css({

    if($.browser.msie){

    });

       

    $(“.jc-demo-box”).attr(“data”, _data);

        width: Math.round(rx * iw) + ‘px’,

    if( deg > 0){

            filter: _filter

            “-webkit-transform”: _val,

            _data = _data – 90;

            pre_img2($(‘.pre-2 img’), rx1, iw, ry1, ih, c.x, c.y);

var imgRotate = function(deg){

        });

 

        _data = parseInt($(“.jc-demo-box”).attr(“data”));

            img2 = $(“#real”),

                    “transform”: _val

 

澳门新葡8455最新网站，        marginTop: ‘-‘ + Math.round(h / rx * cy) + ‘px’

    $(“#idBig”).click(function(e){

    var img1 = $(“.jcrop-holder>img”),

        img1.css({

            _data = 0;

            _data = $(“.jc-demo-box”).attr(“data”);

    $(“#idSmall”).click(function(e){

    .pre-1,.pre-2,.pre-3{ border: 1px solid #c8c8c8;}

    var _Jw = ($(‘#target’).width() – 110) / 2 ,

JS:

        _Jw2 = _Jw + 110,

        var sin = Math.sin(Math.PI / 180 * (_data + deg));

            ow=img1.width(),

        height: Math.round(h / ry * oh) + ‘px’,

               “-moz-transform”: _val,

        if($.browser.msie && (_data == 90 || _data == 270)){

    说明：图像比例为110:135

 

        });

            “-webkit-transform”: _val,

    });

            _data = 270;

            rx = 110 / c.w,

        var img1 = $(“.jcrop-holder>img”),

 

                pre_img2($(‘.pre-3 img’), rx2, ih, ry2, iw, c.x, c.y);

        img1.width(_w).height(_h);

            cy = $(“#small”).position().top,

        $(‘.jcrop-holder’).width(_w).height(_h).css({

               “-moz-transform”: _val,

        _Jh = ($(‘#target’).height() – 135) / 2 ,

}

var imgToSize = function (size) {

var pre_img = function(obj, rx, ow, ry, oh, cx, cy, w, h){

                    “transform”: _val

            ry1 = 90 / c.h,

        }

            rx1 = 73 / c.w,

    }else{

 

        if(_data == 0){

        pre_img($(‘.pre-2 img’), rx, ow, ry, oh, cx, cy, 73, 90);

        marginLeft: ‘-‘ + Math.round(rx * cx) + ‘px’,

            _w = Math.round(ow + size),

    });

            setSelect: [_Jw, _Jh, _Jw2, _Jh2]

    .pre-2{ width: 73px; height: 90px; overflow:hidden; margin-top:
13px; }

            ry = 135 / c.h,

   

            _data = _data + 90;

}

            _data = $(“.jc-demo-box”).attr(“data”);

                 “-o-transform”: _val,

//放大缩小图片

        imgRotate(90);

        imgToSize(20);

            pre_img2($(‘.pre-1 img’), rx, iw, ry, ih, c.x, c.y);

//图片旋转

   

                 “-o-transform”: _val,

                pre_img2($(‘.pre-1 img’), rx, ih, ry, iw, c.x, c.y);

    .pre-3{ width: 40px; height: 48px; overflow:hidden;margin-top: 13px;
}

        if(_data == 270){

兼容：ie6+,FF,chrome等

        var cos = Math.cos(Math.PI / 180 * (_data + deg));

    下载包里有 jquery.Jcrop.css

    function showPreview(c){

            left: Math.round((395 – _w) / 2) + ‘px’,

        $(‘.pre-1 img,.pre-2 img,.pre-3 img’).css({

            img2.width(_h).height(_w);

    

            ry = $(“#small”).height(),

        var api = $.Jcrop(“#target”,{

    .jcrop-holder{overflow:hidden;}

        marginTop: ‘-‘ + Math.round(ry * cy) + ‘px’

            onSelect: showPreview,