等比缩放

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

一些比较炫的响应式网站会在一定范围内有缩放效果。当然，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?_conwidth:320;

    $("#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，然后去想为什么不对，比如换行了，是因为居中宽度不多，不居中了，是因为居中宽度算大了。

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