缩放！所有的东西都可以缩放！
一些比较炫的响应式网站会在一定范围内有缩放效果。当然，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.js var 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]});
待续。。
原文：http://www.cnblogs.com/haimingpro/p/3786352.html