Question

我试图为图库制作随机幻灯片图片。我在页面上有两张图片 - ＆＃34; front＆＃34;一个和＆＃34;后面＆＃34;一个，我有一个定时器设置，每隔几秒，将后面的图像移动到前面并加载一个新的后图像。我基本上是通过交换代码中的图像对象来做到这一点。

当背面图像成为正面图像时，我逐渐从0的不透明度逐渐淡入到不透明度为1，而我的正面图像反向也是如此。我按如下方式实现了这个：

var fadeOutCt = 0;
var fadeOutInterval;

// Decrements the opacity of element by amt, until cap
function decrementOpacity( element, amt, cap ) {
    var currentOpacity = Number( window.getComputedStyle( element ).getPropertyValue( "opacity" ) ); 
    currentOpacity = currentOpacity - amt;
    element.setAttribute( "style", "opacity:" + currentOpacity );

    fadeOutCt = fadeOutCt + 1;

    if ( fadeOutCt >= cap ) {
        element.setAttribute( "style", "opacity:0" );
        clearInterval( fadeOutInterval );
    }
}

// Calls decrementOpacity to fill the specified interval.
function fadeOut( element, interval ) {
    var currentOpacity = Number( window.getComputedStyle( element ).getPropertyValue( "opacity" ) ); 
    fadeOutCt = 0;
    if ( currentOpacity > 0 ) {
        cap = interval / 10.0;
        amt = 1.0 / cap;
        fadeOutInterval = setInterval( decrementOpacity, 10, element, amt, cap );
    }
}

另外，我有另一个例程，它调整我加载的图像大小以符合用户的屏幕（它也使图像居中）。我在淡入或淡出操作之前立即运行。

function resizeForSlideshow( imgToResize ) {
    // Get size of usable area for slideshow
    var usableWidth = window.innerWidth;
    var titleTable = document.getElementById( "descTable" );
    var windowHeight = window.innerHeight;
    var tableHeight = titleTable.offsetHeight;
    var usableHeight = windowHeight - tableHeight;

    // Resize containing div
    var slideDiv = document.getElementById( "slideDiv" );
    slideDiv.setAttribute( "style", "height:" + usableHeight + "px" );

    // Get size of native image to be displayed
    var nativeWidth = imgToResize.naturalWidth;
    var nativeHeight = imgToResize.naturalHeight;

    // Determine width-to-height ratios of those two
    var windowRatio = usableWidth / usableHeight;
    var imageRatio = nativeWidth / nativeHeight;

    if ( imageRatio > windowRatio ) {
        // image's width-to-height is greater than window
        // image should be set to 100% width, less height
        imgToResize.width = usableWidth;
        imgToResize.height = usableWidth * ( nativeHeight / nativeWidth );

        // relocate image accordingly
        var newTop = ( usableHeight - imgToResize.height ) / 2;
        imgToResize.style.left = 0;
        imgToResize.style.top = newTop + "px";
    }
    else {
        // image's width-to-height is less than window
        // image should be set to 100% height, less width
        imgToResize.height = usableHeight;
        imgToResize.width = usableHeight * ( nativeWidth / nativeHeight );

        // relocate image accordingly
        var newLeft = ( usableWidth - imgToResize.width ) / 2;
        imgToResize.style.top = 0;
        imgToResize.style.left = newLeft + "px";

    }
}

问题是，当我淡入或淡出时，它会破坏我的图像的位置。他们不是居中，而是回到页面的左上角（尽管它们的大小仍然是应该的）。我尝试了一些事情，但我没有想法，我希望有人能够解释这里出了什么问题以及如何解决它。

（如果看到行动中的代码会有所帮助：http://artmonitors.com/slideshow/full-slideshow.html

编辑：我后来发现了问题。问题是使用setAttribute设置不透明度也删除了我给出的位置设置。手动设置element.style.opacity使事情有效。

Answer 1

用css为中心怎么样？

{{1}}

Answer 2

你应该关闭风格;

 element.setAttribute( "style", "opacity:" + currentOpacity +";");

Answer 3

我后来想出了问题。问题是使用setAttribute设置不透明度也删除了我给出的位置设置。手动设置element.style.opacity使事情有效。

更改不透明度会中断图像

3 个答案: