Bho*_*omi 3 html javascript css css3
我曾尝试使用html,css和Javascript进行缩放效果,但在缩放内容后图像会脱离父div.
单击zoomin按钮后,图像将离开div,第一个图像将从头开始剪切.
var factor = 1;
function funZoomOut() {
if (factor > 0.5) {
factor = factor - 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
function funZoomIn() {
if (factor < 1.3) {
factor = factor + 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}.demoCss {
overflow: auto;
height: 470px;
text-align: center;
border: 5px solid red;
padding-top: 10px;
position: relative;
}
.test {
height: 100%;
}<body>
<div>
<div>
<button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
<button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
</div>
<div class="demoCss">
<div id="divArea" class="test">
<div>
<img src="Images/2.jpg" alt="image" height="150px" width="150px" id="img1" />
</div>
<div>
<img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
</div>
<div>
<img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
</div>
</div>
</div>
</div>它超出了包含范围,div因为transform-origin(transform(scale())默认情况下,作为转换起点的内容)设置在图像的中心.
如果将其更改为位于顶部中间,则图像将从上到下进行缩放:
.test {
transform-origin: 50% 0%;
}
var factor = 1;
function funZoomOut() {
if (factor > 0.5) {
factor = factor - 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}
function funZoomIn() {
if (factor < 1.3) {
factor = factor + 0.1;
var p = document.getElementById("divArea");
p.setAttribute("style", "transform: scale(" + factor + ");");
}
}.demoCss {
overflow: auto;
height: 470px;
text-align: center;
border: 5px solid red;
padding-top: 10px;
position: relative;
}
.test {
height: 100%;
transform-origin: 50% 0%;
}<div>
<div>
<button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
<button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
</div>
<div class="demoCss">
<div id="divArea" class="test">
<div>
<img src="https://lorempixel.com/300/300/?1" alt="image" height="150px" width="150px" id="img1" />
</div>
<div>
<img src="https://lorempixel.com/300/300/?2" alt="image" height="150px" width="150px" />
</div>
<div>
<img src="https://lorempixel.com/300/300/?3" alt="image" height="150px" width="150px" />
</div>
</div>
</div>