屏幕收缩使用比例

Question

我试图创造一种特定的效果，但我却陷入困境。基本上应该发生的事情是，当用户点击nav时（在下面的代码段中，我已经做到了，所以你只需点击正文）：

1. 主屏缩小
2. 从左侧滑入画布菜单
3. 出现半透明叠加

我的问题在于比例效应。我试图实现的效果是当窗口缩小时，你可以看到整个窗口，只是一个微型版本。我能够得到的最接近的是窗口缩小的片段，但它仍然可以完全滚动，而不是窗口按比例缩小成为缩小版本

我现在拥有它的方式，你仍然可以滚动整个页面，但是我会用e.preventDefault来处理这个问题但是我想要获得屏幕 - 首先收缩。

有人可以帮忙吗？

＆＃13;
＆＃13;
$(document).ready(function() {
	
	var pageContainer = $('.page-container');
	var offCanvas = $('.off-canvas');
	
	pageContainer.click(function() {
		
		offCanvas.toggleClass('menuActive')
		pageContainer.toggleClass('pc-active');
		
		
	});
	
	
	
});
＆＃13;
* {
	padding: 0;
	margin: 0;
}

.off-canvas {
	position: absolute;
	left: 0;
	top: 0;
	height: 100vh;
	width: 300px;
	background-color: blue;
	transition: all .3s ease;
	transform: translate3d(-300px, 0, 0);
	z-index: 10;
}

.menuActive {
	transform: translate3d(0, 0, 0);
}

.page-container {
	border: 4px solid;
	height: 100%;
	width: 100%;
	min-height: 1200px;
	background-color: #ccc;
	transform: scale3d(1, 1, 1);
	transition: all .4s ease;
}

.pc-active {
	transform: scale3d(.9, .9, .1)
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

您可以设置 public class MyJobService extends JobService { JobParameters mParams; public boolean onStartJob(JobParameters params) { mParams = params; new MyAsyncTaskThatDoesTheWork().execute(); return true; } private class MyAsyncTaskThatDoesTheWork extends AsyncTask<Void, Void, Boolean> { @Override protected Boolean doInBackground(Void... params) { return methodToDoAllMyWork(); } @Override protected void onPostExecute(Boolean isSuccess) { if(mParams != null) { jobFinished(mParams, !isSuccess); } } } } 单位中的width/height根据窗口调整大小

请参阅代码段：

＆＃13;

＆＃13;

vw/vh

＆＃13;

$(document).ready(function() {

  var pageContainer = $('.page-container');
  var offCanvas = $('.off-canvas');

  pageContainer.click(function() {

    offCanvas.toggleClass('menuActive')
    pageContainer.toggleClass('pc-active');


  });



});

＆＃13;

* {
  padding: 0;
  margin: 0;
}

.off-canvas {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 300px;
  background-color: blue;
  transition: all .3s ease;
  transform: translate3d(-300px, 0, 0);
  z-index: 10;
}

.menuActive {
  transform: translate3d(0, 0, 0);
}

.page-container {
  border: 4px solid;
  height: 100%;
  width: 100%;
  min-height: 1200px;
  background-color: #ccc;
  transform: scale3d(1, 1, 1);
  transition: all .4s ease;
}

.pc-active {
  width: 90vw;
  height: 90vh;
  min-height: 90vh;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用margin-left将微缩移动到offset of your sidenavbar切换开关，并通过设置vh的最小高度将其缩放到所需的值与transform-origin as top left。

＆＃13;

＆＃13;

$(document).ready(function() {
	
	var pageContainer = $('.page-container');
	var offCanvas = $('.off-canvas');
	
	pageContainer.click(function() {
		
		offCanvas.toggleClass('menuActive')
		pageContainer.toggleClass('pc-active');
		
		
	});
	
	
	
});

＆＃13;

* {
	padding: 0;
	margin: 0;
}

.off-canvas {
	position: absolute;
	left: 0;
	top: 0;
	height: 100vh;
	width: 300px;
	background-color: blue;
	transition: all .3s ease;
	transform: translate3d(-300px, 0, 0);
	z-index: 10;
}

.menuActive {
	transform: translate3d(0, 0, 0);
}

.page-container {
	border: 4px solid;
	height: 100%;
	width: 100%;
	min-height: 1200px;
	background-color: #ccc;
	transform: scale3d(1, 1, 1);
	transition: all .4s ease;
  text-align:center;
}

.pc-active {
  margin-left:310px;
  transform-origin:left top;
  min-height:90vh;
  transform: scale(0.4,0.4);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container">
<h3> Page content</h3>
Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff 
</div>

＆＃13;

＆＃13;

＆＃13;