自适应全屏与居中算法

补充方法：

除了全屏缩放用的算法，如果想要页面各种元素跟窗口等比同步缩放，可以使用这样一个方法：

1 function Simpzoom(srcWidth,srcHeight,maxWidth,nowWidth){

2     var num=maxWidth*srcWidth / nowWidth;

3     var _width=srcWidth*srcWidth / num;

4     var _height=(srcHeight*_width) / srcWidth;

5     //console.log(_width,_height);

6     return [_width,_height];

7 }

有了这个方法，就可以为所欲为了* w *

smallArr=Simpzoom(438,152,2500,newArr[0]);

2500是参照的宽度，不一定是浏览器窗口的宽，可以手动调节这个宽度以达到正确的比例，数字越大，得到的smallArr[0]越小。

newArr[]是下文中newArr=getHtmlSize();   该方法返回的浏览器窗口宽高。

///////////////////////////////////////////////////////////////////////////////////

自适应浏览器窗口的页面是很流行的，其实要做这个效果也只需要几个步骤。

首先，用于计算图片尺寸的通用类：

function imgzoom(srcWidth,srcHeight,maxWidth,maxHeight){

     this.srcWidth=srcWidth;//获得原始宽度

     this.srcHeight=srcHeight;//获得原始高度

     this.maxWidth=maxWidth;//获得限定宽度

     this.maxHeight=maxHeight;//获得限定高度

     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;

    }

    

    return [this.newWidth,this.newHeight]

}

这个imgzoom类返回获取到的浏览器宽this.newWidth和高this.newHeight。

然后写一个执行js，其中包括初始尺寸，以及获取浏览器尺寸：

var newArr=[];

var sizeArr=[]; //

startWindowSize();

function startWindowSize(){

    windowSize();

    window.onresize=windowSize;

}

//检测到浏览器发生变化

function windowSize(){

    newArr=getHtmlSize();    

    sizeArr=(new imgzoom(1000,625,newArr[0],newArr[1]).getSize());  //初始尺寸，新尺寸，执行的函数

        document.getElementById("img").style.width=sizeArr[0]+"px";

    document.getElementById("img").style.height=sizeArr[1]+"px";

    /*这个是居中算法：document.getElementById("imgdiv").style.left=(newArr[0]-sizeArr[0])/2+"px"; 

    document.getElementById("imgdiv").style.top=(newArr[1]-sizeArr[1])/2+"px"; 不过都全屏了还要居中干嘛*/

}

//获取浏览器大小

function getHtmlSize(){ var winWidth,winHeight;

    var arr=[];

    if (window.innerWidth){

        winWidth = window.innerWidth;

    }else{

        if((document.body) && (document.body.clientWidth)){

            winWidth = document.body.clientWidth;

        }

    }

        

    if (window.innerHeight){

        winHeight = window.innerHeight;

    }else{

        if((document.body) && (document.body.clientHeight)){

            winHeight = document.body.clientHeight;

        }    

    }

    

    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){

        winHeight = document.documentElement.clientHeight;

        winWidth = document.documentElement.clientWidth;

    }

    

    arr.push(winWidth,winHeight);

    return arr;

}

这样HTML中id名为img的IMG图片就自适应了，如果需要什么元素居中，

横向位置 left：newArr[0]-sizeArr[0])/2

竖向居中  top: newArr[1]-sizeArr[1])/2

就搞定了。