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 のコメントです。

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>
于 2012-12-10T23:22:48.490 に答える