等比缩放

缩放！所有的东西都可以缩放！

一些比较炫的响应式网站会在一定范围内有缩放效果。当然，js可以搞定～

算法很简单，不要想复杂了－ －

需要知道三个常量，一个变量：

元素原始高，元素原始宽，当前窗口宽（元素的原始尺寸的静态布局宽），动态窗口宽。

Width，Height，maxWidth，nowWidth

定义一个方法，返回一个数组：

function simpZoom(Width,Height,maxWidth,nowWidth){
    var _width=nowWidth*Width / maxWidth;
    var _height=(Height*_width) / Width;
    return [_width,_height]
}

var _listArr=simpZoom(300,169,1024,$(window).width());

显然当前窗口和动态窗口的比例与静态宽度和动态宽度的比例相同，

然后通过动态的宽度与静态宽度高度很容易等比得到动态高度。

以前用过的全屏缩放类，集成了宽和高以及限定的判断：

// CLASS 
function imgzoom(srcWidth,srcHeight,maxWidth,maxHeight){
     this.srcWidth=srcWidth;//获得原始宽度
     this.srcHeight=srcHeight;//获得原始高度
     this.maxWidth=maxWidth;//获得限定宽度
     this.maxHeight=maxHeight;//获得限定高度
     this.newWidth;
     this.newHeight;
}

imgzoom.prototype.getHeightSize=function(){
    this.newHeight=this.maxHeight;
    this.newWidth=(this.srcWidth*this.maxHeight)/this.srcHeight;
    return [this.newWidth,this.newHeight];
}
imgzoom.prototype.getSize=function (){
    
    this.newWidth=this.maxWidth;
    this.newHeight=(this.srcHeight*this.maxWidth)/this.srcWidth;
    
    if(this.newHeight<this.maxHeight){
        this.newHeight=this.maxHeight;
        this.newWidth=(this.srcWidth*this.maxHeight)/this.srcHeight;
    }
    var srcNum=this.srcWidth/this.srcHeight;
    var maxNum=this.maxWidth/this.maxHeight;

    if(srcNum>=maxNum){
        //比较高宽比例，确定以宽或者是高为基准进行计算。
        if(this.srcWidth>this.maxWidth){//以宽为基准开始计算，
            //当宽度大于限定宽度，开始缩放
            this.newWidth=this.maxWidth;
            this.newHeight=(this.srcHeight*this.maxWidth)/this.srcWidth
        }else{
            //当宽度小于限定宽度，直接返回原始数值。
            this.newWidth=this.srcWidth;
            this.newHeight=this.srcHeight;
        }

    }else{
        if(this.srcHeight>this.maxHeight){//以高为基准，进行计算
            //当高度大于限定高度，开始缩放。
            this.newHeight=this.maxHeight;
            this.newWidth=(this.srcWidth*this.maxHeight)/this.srcHeight
        }else{
            //当高度小于限定高度，直接返回原始数值。
            this.newWidth=this.srcWidth;
            this.newHeight=this.srcHeight;
        }
    }
    return [this.newWidth,this.newHeight]
}

function Simpzoom(srcWidth,srcHeight,maxWidth,nowWidth){
    var num=maxWidth*srcWidth / nowWidth;
    var _width=srcWidth*srcWidth / num;
    var _height=(srcHeight*_width) / srcWidth;
    console.log(_width,_height);
    return [_width,_height]
}

最后这个Simpzoom是我网上随便找来的，比较蛋疼，其实那个num什么也不是，做成等式分数就把width的平方上多余的width约掉了，故作神秘是没必要的。

我用js判断一个区间，类似media query 然后让图片只在这个区间内才缩放。

要注意的是，js的大小判断符前面不能是常量，好吧，一般人不犯这个错。。。

排除了低级错误，剩下的就是理清逻辑关系。

首先，缩放的时候不应该把margin考虑进去！

但是，居中的时候就要把margin考虑进去！

还有啊，超出使能区间时把图片尺寸还原的时候margin千万别带进去！

var _lang=1;
var _current=2;
var _list=false;
var _goTop=false;
var _listArr=[];
var _window=0;
var _conwidth=1000;
var imgWidth=300;
var imgHeight=169;

function start(){
    windowInit();
    pInit();    
    btnEff();
    btnInit();
    wResize();
}
function pInit(){
    if(($(window).width()<1000)&&($(window).width()>=700)){
            pResize();
            imgWidth=_listArr[0];
            imgHeight=_listArr[1];
            _conwidth=(Math.floor(_window/(imgWidth+24)))*(imgWidth+24);
        }
    else{
        imgWidth=300;
        imgHeight=169;
        if(($(window).width()<700)){ 
                _conwidth=(Math.floor(_window/(imgWidth+24)))*(imgWidth+24);
        }
        else{
                _conwidth=1000;
        }
    }
    $("#js-section img").css({"width":imgWidth+"px","height":imgHeight+"px"});
    sectionMargin();
}
function windowInit(){
    _window=$(window).width()<1000?$(window).width():1000;
    _conwidth=_conwidth>_window?_window:_conwidth;
    _window=_window>320?_window:320;
    _conwidth=_conwidth>320?_con320;
    $("#js-nav").css({"width":_window-50+"px"});
}
function wResize(){
    $(window).bind('resize',function(){
        windowInit();
        pInit();
    });
    $(window).bind( 'orientationchange', function(e){
        if(e.orientation){
            windowInit();
            pInit();
        }    
    });
}
function btnInit(){
    $("#js-down_menu").css({"display":"none"});//Do not hide in main css but in media query
    $("#js-nav p").eq(_current).css({"background":"#4d4d4d"});
    $("#js-lan a").eq(_lang).css({"background":"#4d4d4d"});
}
function bgBtn(_div,_i,_type){
            $(_div).eq(_i).mouseenter(function(){
                $(this).css({"background":"#4d4d4d"});    
            });
            $(_div).eq(_i).mouseleave(function(){
                if(_type){
                    if(_i!=_lang){
                        $(_div).eq(_i).css({"background":"#2e2e2e"});
                    }
                }
                else{
                    if(_i!=_current){
                        $(_div).eq(_i).css({"background":"#000"});
                    }
                }
            });
            $(_div).eq(_i).click(function(){
                if(_type){
                    if(_i!=_lang){
                        $(_div).css({"background":"#2e2e2e"});
                        _lang=_i;
                    }
                }
                else{
                    $(_div).css({"background":"#000"});
                    _current=_i;
                }
                $(this).css({"background":"#4d4d4d"});    
            });
}
function btnEff(){
    for(var i=1; i<5; i++){
        (function(i){
            bgBtn("#js-nav p",i,false);
        })(i);
    }
    if(!_list){
        $("#js-gotop").click(function(){
            $("html,body").animate({scrollTop:0},500)
        });
    }
    $("#js-badge").click(function(){
        if($("#js-badge img").attr("src")=="images/badge.jpg"){
            $("#js-badge img").attr({"src":"images/badge_hover.jpg"});
            $("#js-down_menu").slideDown(500);
        }
        else{
            $("#js-badge img").attr({"src":"images/badge.jpg"});
            $("#js-down_menu").slideUp(500);
        }
    });
    for (var i=0; i<3; i++){
        (function(i){
            bgBtn("#js-lan a",i,true);
            $("#js-down_lan a").eq(_lang).css({"color":"#b2b2b2"});
            $("#js-down_lan a").eq(i).click(function(){
                $("#js-down_lan a").css({"color":"#000"});
                $(this).css({"color":"#b2b2b2"});
                _lang=i;
            });
        })(i);
    }
}
function pResize(){
    _listArr=simpZoom(300,169,1000,$(window).width());
    $("#js-section img").css({"width":_listArr[0]+"px","height":_listArr[1]+"px"});
}
function simpZoom(Width,Height,maxWidth,nowWidth){
    var _width=nowWidth*Width / maxWidth;
    var _height=(Height*_width) / Width;
    return [_width,_height]
}
function sectionMargin(){
    if($(window).width()>320){
            $("#js-section").css({"width":_conwidth+"px"});
    }
    else{
            $("#js-section").css({"width":"320px"});
    }
}

整改的时候，要注意观察每个现象当时的窗口宽度和居中部分的宽度。

多多console，然后去想为什么不对，比如换行了，是因为居中宽度不多，不居中了，是因为居中宽度算大了。

种种小儿科但是很搞脑子的判断，自己斟酌，最后就能把看上去烦死人的逻辑理清楚，写出漂亮的代码！