缩放！所有的东西都可以缩放！
一些比较炫的响应式网站会在一定范围内有缩放效果。当然，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?_con320; $("#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，然后去想为什么不对，比如换行了，是因为居中宽度不多，不居中了，是因为居中宽度算大了。
种种小儿科但是很搞脑子的判断，自己斟酌，最后就能把看上去烦死人的逻辑理清楚，写出漂亮的代码！