Question

我有一个页面，其中包含数百个内有文字的Div。所有div都以绝对坐标定位。页面很大，无法在普通显示器上显示。我希望在页面加载页面缩小，所以你看到整个页面，文本将是如此之小，你无法阅读它。然后在超时后，它应该根据它的ID值放大到指定的div。

可以这样做吗？

我知道我可以将它用于初始缩小：

document.body.style.zoom=0.5;this.blur();

但如何放大指定的项目？

编辑：我不够清楚，我道歉：一旦缩小，我想放大，使用缩放动作，因此用户知道缩放的div所在的位置。谢谢！

Answer 1

这可能适用于您的请求......

$('.myDiv').click(function() {
  var top = '100px';
  var left = '50px';
  $('body').animate({zoom: '100%', scrollTop: top, scrollLeft: left});
});

body {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  zoom: 100%;
}
body.out {
  zoom: 50%;
}
.myDiv {
  width: 200px;
  height: 300px;
  float: left;
  background-color: red;
  border: 1px solid black;
}
html,
body {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en">

<head>
  <title>Test</title>
</head>

<body class="out">
  <div class="myDiv"></div>
  <div class="myDiv"></div>
  <div class="myDiv"></div>
  <div class="myDiv"></div>
  <div class="myDiv"></div>
</body>

</html>

用javascript缩放到div

1 个答案: