用javascript缩放到div
[英]zoom to div with javascript
问题描述
I have a page that contains hundreds of Divs with text inside. 
我有一个页面，其中包含数百个带有文本的Div。 All divs are positioned with absolute coordinate. 所有div均以绝对坐标定位。 the page is very big, and can not be displayed on a normal monitor. 该页面很大，无法在普通显示器上显示。 I would like that on pageload the page is zoomed out, so you see the entire page, the texts will be so small that you cannot read it. 我希望页面加载时页面缩小，因此您可以看到整个页面，文本太小而无法阅读。 Then after a timeout it should zoom in towards a specified div, based on it's ID value. 然后，在超时后，它应该根据其ID值放大到指定的div。
Can this be done? 能做到吗？
I understand i can use this for the inital zoom out: 我了解我可以将其用于初始缩小：
document.body.style.zoom=0.5;this.blur();
but how do i zoom in to a specified item? 但是如何放大指定的项目？
edit: I was not clear enough, i apologzie: once zoomed out, i want to zoom in, with a zoom motion, so the user knows where the zoomed div is located. 编辑：我还不够清楚，我很抱歉：缩小后，我想以缩放动作进行放大，因此用户知道缩放后的div所在的位置。 thanks! 谢谢！
1 个解决方案
解决方案1
0 2016-12-19 14:02:30
This may work for your request... 这可能适合您的要求...
$('.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.