首页 > 代码库 > 等比缩放

等比缩放

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

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

以前就用过的全屏缩放类:

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

后来做项目的时候,本来一位jquery做animation的元素需要缩放:

// JavaScript Document(function(window){     var scaleElement = window.scaleElement = function(selector,parameter){        return new scaleElement.fn.init(selector,parameter);    };    scaleElement.fn=scaleElement.prototype={        init:function(selector,parameter){//此处的this作用域指向o.fn            //====            var quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;            var match,elem;            match = quickExpr.exec( selector );            elem=document.getElementById( match[2]);             if ( elem && elem.parentNode ) {                  this.length = 1;                  this[0] = elem;             }            this.context = document;            this.selector = selector;            return this;        },       images:function (){          var parameter=arguments||null;          if(!parameter)return;         // console.log(this..offsetLeft)         new creatHtmlElement("img",this[0],{css:{position:"absolute",left:0,top:0},value:{src:parameter[0]}});           new creatHtmlElement("img",this[0],{css:{position:"absolute",left:parameter[2]-this[0]._width,top:parameter[4],width:parameter[2],height:parameter[3]},value:{src:parameter[1]}});       },       hover:function (){          var parameter=arguments||null;          if(!parameter)return;          var _this=this;          var time=parameter[3]||1;          this[0].onmouseover=function(){             var _mask=_this.getElement(1);             TweenMax.to(_mask,time,{css:{top:-parameter[1]+parameter[2]+5,left:0},ease:Circ.easeOut});                       }           this[0].onmouseout=function(){              var _mask=_this.getElement(1);            TweenMax.to(_mask,time,{css:{top:parameter[1]-parameter[2],left:-(parameter[0]-_this[0]._width)},ease:Circ.easeOut});          }        },       allHover:function (){          var parameter=arguments||null;            if(!parameter) return;            if(typeof parameter[0]=="string"){                for(var i=0;i<this.size(parameter[0]);i++){                    var _elem=this.getElement(i,parameter[0]);                    _elem.index=i;                    _elem.onmouseover=function (e){                        if(checkHover(e,this)){                              parameter[1](this,"over");                        }                    }                    _elem.onmouseout=function (e){                        if(checkHover(e,this)){                              parameter[1](this,"out");                        }                    }                }            }else{                this[0].onclick=function (){                    parameter[0](this);                }            }        },       over:function(){           var parameter=arguments||null;           if(!parameter)return;           var _mask=this.getElement(1);            TweenMax.to(_mask,2,{css:{top:parameter[1]-parameter[2],left:0},ease:Circ.easeOut});        },        out:function(){             var parameter=arguments||null;            if(!parameter)return;             var _mask=this.getElement(1);            TweenMax.to(_mask,2,{css:{top:-parameter[1]+parameter[2]+5,left:-(parameter[0]-this[0]._width)},ease:Circ.easeOut});        },      nowStatus:function (){                },      scale:function (srcWidth,srcHeight,maxWidth,nowWidth){          var num=maxWidth*srcWidth / nowWidth;          var _width=srcWidth*srcWidth / num;          var _height=(srcHeight*_width) / srcWidth;          this[0].style.width=_width+‘px‘;          this[0].style.height=_height+‘px‘;          this[0]._width=_width;                   var _img=this.getElement(0);          _img.style.width=_width+‘px‘;           _img.style.height=_height+‘px‘;                },      size:function(type){            var _type=type||null;            if(!_type){                return this[0].getElementsByTagName("*").length;            }else{                return this[0].getElementsByTagName(type).length;            }                    },      getElement:function (i,type){            var _type=type||null;            if(!_type){                return this[0].getElementsByTagName("*")[i];            }else{                return this[0].getElementsByTagName(type)[i];            }        }    };    scaleElement.fn.init.prototype = scaleElement.fn;})(window)

然后用的时候,搞了很多数组,用来储存原始尺寸,在原始尺寸的基础上根据窗口大小等比例缩放:

ar sizeArr=[];//var smallArr=[];The old way. Already scaled in ScaleElement.jsvar titleArr=[];var topArr=[];var topLongArr=[];var topShortArr=[];var navbgArr=[];var toplogoArr=[];var nav0Arr=[];function windowSize(){    /*init newArr for all*/    newArr=getHtmlSize();//这里因为没用jquery用的是一个原生js获取窗口尺寸的数组[0]是宽,[1]是高        /*top*/    topArr=Simpzoom(1190,30,1190,newArr[0]);    $("#top").css({"height":topArr[1]});    topLongArr=Simpzoom(48,14,1050,newArr[0]);    $(".top_0").css({"width":topLongArr[0],"height":topLongArr[1]});        $(".top_1").css({"width":topLongArr[0],"height":topLongArr[1]});    topShortArr=Simpzoom(24,14,1050,newArr[0]);    $(".top_2").css({"width":topShortArr[0],"height":topShortArr[1]});        /*top log*/    toplogoArr=Simpzoom(256,144,1190,newArr[0]);    $("#top_logo").css({"width":toplogoArr[0],"height":toplogoArr[1]});        /*nav bg*/    navbgArr=Simpzoom(1190,88,1190,newArr[0]);    $("#nav_bg").css({"height":navbgArr[1]});         /*nav butttons*/        nav0Arr=Simpzoom(146,52,1050,newArr[0]);    $("#nav").css({"top":(navbgArr[1]+topArr[1]-nav0Arr[1])/2+topArr[1]})    $(".nav_0").css({"width":nav0Arr[0],"height":nav0Arr[1]});    /*slider banner*/         var _width=newArr[0]<1960?newArr[0]:1960;    $(‘#box‘).css({width:_width});        sizeArr=(new imgzoom(1840,642,newArr[0],newArr[1]).getSize());    //JS get inline style height instead of css auto sizing    //var _banner_w=sizeArr[0]<newArr[0]?newArr[0]:sizeArr[0]+"px";        document.getElementById("banner_0").style.height = document.getElementById("slider_blank").style.height =sizeArr[1]+"px";     $("#slider_blank").css({"margin-top":toplogoArr[1]+topArr[1]});       /*slider small*/     smallArr=Simpzoom(438,152,1887,newArr[0]);     $("#slider_small").css({"height":smallArr[1]});              for(var i=0; i<4; i++){        scaleElement("#small_"+i).scale(438,152,1887,newArr[0]);        //$(".small_"+i).css({"width":smallArr[0],"height":smallArr[1]}); The old way. Already scaled in ScaleElement.js       }    scaleElement("#cele_left").scale(979,687,1988,newArr[0]);    scaleElement("#cele_right").scale(979,687,1988,newArr[0]);    titleArr=Simpzoom(230,53,1154,newArr[0]);    $("#celetitle").css({"width":titleArr[0],"height":titleArr[1]});    $("#chinatitle").css({"width":titleArr[0],"height":titleArr[1]});    $("#overseastitle").css({"width":titleArr[0],"height":titleArr[1]});

 

 

待续。。