0

所以我需要在放大后将图像居中，我现在不能使用任何 Jquery ，它会
向右移动并叠加，但最右边的图像在浏览器屏幕的末尾被截断

<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>
4

1 回答 1

0

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

这些编辑假设图像具有 aposition不是静态的并且具有top:50%and 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>
于 2012-12-10T23:22:48.490 回答