等比缩放——精选推荐

等⽐缩放缩放！所有的东西都可以缩放！
⼀些⽐较炫的响应式⽹站会在⼀定范围内有缩放效果。

当然，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?_conwidth:320;
$("#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，然后去想为什么不对，⽐如换⾏了，是因为居中宽度不多，不居中了，是因为居中宽度算⼤了。

种种⼩⼉科但是很搞脑⼦的判断，⾃⼰斟酌，最后就能把看上去烦死⼈的逻辑理清楚，写出漂亮的代码！。