javascript - 如何缩放内容以保持比例

Question

<分区>

Answer 1

已更新: 这 JS Fiddle-Updated在示例中模拟该漫画页面，但方式更简单。

javascript 代码包含注释行来解释它是如何工作的，对于 CSS 来说，大部分代码行都是 self 解释的，最重要的是 #outer div 的这些行来模拟窗口上的转换调整大小:

transform: scale(1, 1);
transition: transform 0.5s ease-in-out;

在媒体查询中

transform: scale(1.05, 1.05);
transition: transform 0.5s ease-in-out;

对于所有 .inner div，我们使用 .scaleUp 类将它们放大，同时它们是透明的，然后在每次点击时我们添加 .scaleDown 类到相应的元素以将其过渡缩放回其原始大小并将其 opacity 设置为 1:

.scaleUp {
    transform: scale(1.3, 1.3);
}
.scaleDown {
    transform: scale(1, 1);
    opacity: 1;
    transition: all 0.5s ease-in;
}

同样重要的是，在 javascript 中，xWidth 的值应该比 CSS 媒体查询中定义的断点高 1px。

---

完整代码:

var iDivs = $('#outer .inner'),
    iLeftDivs = $('.left .inner'),
    iRightDivs = $('.right inner'),
    outer = $('#outer'),
    lefts = $('.left'),
    xWidth = 651, i = 0, winW, isHeightChanged = false;
 
// Scaling all .inner divs up while opacity 0
iDivs.addClass('scaleUp');
control();

// On Click, call update(), and on resize call control() 
$(window).on('click', update);

$(window).on('resize', control);

// This will control showing or hiding the left column divs -
// If the window width is bigger than the break point width - 
// show default behaivor, otherwise if we still showing the -
// left divs then it shows the left divs, if we already -
// finished left and showing right divs, it shows right instead -
// With a little bug fix for .left margin-top when resizing before -
// reachign the point where showing .right divs;
function control(){
    winW = $(window).width();
    if(winW < xWidth){
        if(i > iLeftDivs.length ){
            lefts.css({'margin-top':'0'}).hide();
        }else{
            lefts.css({'margin-top':'10px'}).show();
        }
        if(!isHeightChanged){
            isHeightChanged = true;
        }else{
            if(isHeightChanged){
                isHeightChanged = false;
            }
        }
    }else{
        lefts.css({'margin-top':'0'}).show();
    }
}


function update(){
    winW = $(window).width();
    if(winW < xWidth){
        // If we already finished showing the divs on left and now -
        // showing the right divs, we hide the .left div.
        if(i >= iLeftDivs.length){
            $('.left').hide();
        }
        $(iDivs[i]).addClass('scaleDown');
        i++;
    }else{
        // As long as we haven't finished showing all divs, we add the -
        // the scaling down class to show them and increase the counter.
        if(i < iDivs.length){
            $(iDivs[i]).addClass('scaleDown');
            i++;
        }else{
            //Here you should write the code that populate the next page's images
        }
    }
}

html, body{
  padding:0;
  margin:0;
  overflow:hidden;
  background:orange;
}
#outer {
  min-width:450px;
  width: 90vw;
  max-width:800px;
  padding: 1vh 1vw;
  margin:0 auto;
  margin-top:5px;
  /* We scale it to original size with transition effect using below lines */
  transform: scale(1, 1);
  transition: transform 0.5s ease-in-out;
}
/* clear fix because of the float */
#outer:after {
  content: "";
  display: table;
  clear: both;
}
.inner {
  background-color: #090;
  width: calc(100% - 10px);
  color:white;
  min-height: 19vh;
  margin:5px;
  opacity:0;
  padding:3px;
}
.left, .right{
  width: calc(51% - 2vw);
  display:inline-block;
  float:left;
}
.right{
  float:right;
}

#in2 { background-color: navy; }
#in3 { background-color: maroon; }
#in4 { background-color: #444; }
#in5 { background-color: brown; }
#in6 { background-color: purple; }

/* initially scale all .inner divs up while they're transparent */
.scaleUp {
  transform: scale(1.3, 1.3);
}
/* on each click we scale down to original size, set opacity to 1 with transition */
.scaleDown {
  transform: scale(1, 1);
  opacity: 1;
  transition: all 0.5s ease-in;
}

@media screen and (max-width: 650px){
  #outer{
    width: 455px;
    /* We scale it up just a bit to add the required effect using below lines */
    transform: scale(1.05, 1.05);
    transition: transform 0.5s ease-in-out;
  }
  .left, .right{
    width: calc(100% - 5px);
    margin:0 auto;
    float:none;
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="outer">
  <div class="left">

    <div class="inner" id="in1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eius.
    </div>
    <div class="inner" id="in2">
      Molestias quisquam iusto alias asperiores est non explicabo esse, nisi mollitia. Accusamus nisi, numquam provident eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure autem maxime accusantium explicabo, ducimus nam laborum praesentium
      assumenda deserunt! Placeat eaque distinctio deserunt sapiente minima aliquam et quae veritatis possimus?
    </div>
    <div class="inner" id="in3">
      Nostrum quae cum eius fugiat, repudiandae consectetur, nulla maxime quasi dolor voluptates voluptatem.
    </div>
  </div>
  <div class="right">
    <div class="inner" id="in4">
      Molestias quisquam iusto alias asperiores est non explicabo esse, nisi mollitia. Accusamus nisi, numquam provident eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure autem maxime accusantium explicabo, ducimus nam laborum praesentium
      assumenda deserunt! Placeat eaque distinctio deserunt sapiente minima aliquam et quae veritatis possimus?
    </div>
    <div class="inner" id="in5">
      Nostrum quae cum eius fugiat, repudiandae consectetur, nulla maxime quasi dolor voluptates voluptatem.
    </div>
     <div class="inner" id="in6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eius.
    </div>
  </div>
</div>