使用javascript缩放到div
Posted
技术标签:
【中文标题】使用javascript缩放到div【英文标题】：zoom to div with javascript 【发布时间】：2016-12-19 13:52:47 【问题描述】：我有一个页面，其中包含数百个带有文本的 Div。所有 div 都以绝对坐标定位。页面很大，在普通显示器上无法显示。我希望在页面加载时页面被缩小，所以你可以看到整个页面，文本会太小以至于你无法阅读。然后在超时后，它应该根据它的 ID 值放大到指定的 div。
这个可以吗？
我知道我可以将它用于初始缩小：
document.body.style.zoom=0.5;this.blur();
但是我如何放大到指定的项目？
编辑：我不够清楚，我道歉：一旦缩小，我想放大，用缩放动作，所以用户知道缩放的 div 的位置。谢谢！
【问题讨论】：
【参考方案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的主要内容，如果未能解决你的问题，请参考以下文章