自适应全屏与居中算法

补充方法：

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

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];
}

有了这个方法，就可以为所欲为了* 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

就搞定了。