使用javascript缩放到div

我有一个包含数百个包含文本的Div的页面。所有div都以绝对坐标定位。该页面非常大，并且无法在正常的显示器上显示。我希望在页面加载时页面缩小，所以你看到整个页面，文本会很小，以至于你看不懂它。然后超时后，它应该放大到一个指定的div，根据它的ID值。使用javascript缩放到div

可以这样做吗？

我明白我可以用这个为inital缩小：

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

但我怎么放大到指定的项目吗？

编辑：我是不够清楚，我apologzie：一旦缩小，我要放大，具有缩放运动，这样用户就知道在缩放DIV所在。谢谢！

来源

2016-12-19 sharkyenergy

这可能对您的请求工作...

$('.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>

来源

2016-12-19 14:02:30

对不起，我可能没有足够清晰，我表示歉意。对主要问题添加了一个编辑。 – sharkyenergy

@sharkyenergy请检查我更新的答案。 –

缩放部分工作，但滚动部分没有。它总是放大到左上角.. – sharkyenergy

使用javascript缩放到div

回答

相关问题