使用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

回答

相關問題