如何在缩放时使图像居中

Question

所以我需要在放大后将图像居中，我无法使用任何Jquerys
现在，它全部向右移动并叠加，但最右侧的图像在浏览器屏幕结束时被切断

<script>
var target;     //global container for currently clicked div
var timer;
var tick = 40;
var diffw = 341;
var diffh = 235;
var trans = 0.5; //opacity 
var zoomed = false; //boolean, can only be true or false

function startAnimation(divname) {
    target = divname; 
    if (zoomed==false)  {
        timer = setInterval("zoomPhotoIn()",tick); 
    }else {
        timer = setInterval("zoomPhotoOut()",tick); 
    }
}
function zoomPhotoIn()  {
    trans += 0.02;
    diffw += 15;
    diffh += 10;
    document.getElementById(target).style.opacity = trans;
    document.getElementById(target).style.width = diffw+"px";
    document.getElementById(target).style.height = diffh+"px";
    document.getElementById(target).style.zIndex = 5;
    if(diffw >= 700)    {
        clearInterval(timer);
        zoomed = true;
    }
}
function zoomPhotoOut() {
    trans -= 0.02;
    diffw -= 15;
    diffh -= 10;
    document.getElementById(target).style.opacity = trans;
    document.getElementById(target).style.width = diffw+"px";
    document.getElementById(target).style.height = diffh+"px";
    document.getElementById(target).style.zIndex = 1;
    if(diffw <= 341)    {
        clearInterval(timer);
        zoomed = false;
    }
}
</script>

Answer 1

这基本上是@Shmiddty的回答形式的评论。

这些编辑假设图像具有非静态position，并且具有top:50%和left:50%：

<script>
var target;     //global container for currently clicked div
var timer;
var tick = 40;
var diffw = 341;
var diffh = 235;
var trans = 0.5; //opacity 
var zoomed = false; //boolean, can only be true or false

function startAnimation(divname) {
    target = divname; 
    if (zoomed==false)  {
        timer = setInterval("zoomPhotoIn()",tick); 
    }else {
        timer = setInterval("zoomPhotoOut()",tick); 
    }
}
function zoomPhotoIn()  {
    trans += 0.02;
    diffw += 15;
    diffh += 10;
    document.getElementById(target).style.opacity = trans;
    document.getElementById(target).style.width = diffw+"px";
    document.getElementById(target).style.height = diffh+"px";
    document.getElementById(target).style.zIndex = 5;
    document.getElementById(target).style.marginLeft = (diffw/2) + "px";
    document.getElementById(target).style.marginTop = (diffh/2) + "px";
    if(diffw >= 700)    {
        clearInterval(timer);
        zoomed = true;
    }
}
function zoomPhotoOut() {
    trans -= 0.02;
    diffw -= 15;
    diffh -= 10;
    document.getElementById(target).style.opacity = trans;
    document.getElementById(target).style.width = diffw+"px";
    document.getElementById(target).style.height = diffh+"px";
    document.getElementById(target).style.zIndex = 1;
    document.getElementById(target).style.marginLeft = (diffw/2) + "px";
    document.getElementById(target).style.marginTop = (diffh/2) + "px";
    if(diffw <= 341)    {
        clearInterval(timer);
        zoomed = false;
    }
}
</script>