Question

我试图制作动态的背景页面。我正在使用下面的代码;



function loadBackground() {
    $.ajax({
        url: 'getimages.php',
        success : function(filename) {
        $('html').css('background', 'url('+filename+') no-repeat center center fixed');
        $('html').css('-webkit-background-size', 'cover');
        $('html').css('-moz-background-size', 'cover');
        $('html').css('-o-background-size', 'cover');
        $('html').css('background-size', 'cover');
        }
    });
}

with：body onLoad =“setInterval（loadBackground，10000）;”

我正在使用它，因为在10秒内自动更改。

这里是getimages.php文件：

function loadBackground() {
    $.ajax({
        url: 'getimages.php',
        success : function(filename) {
        $('html').css('background', 'url('+filename+') no-repeat center center fixed');
        $('html').css('-webkit-background-size', 'cover');
        $('html').css('-moz-background-size', 'cover');
        $('html').css('-o-background-size', 'cover');
        $('html').css('background-size', 'cover');
        }
    });
}

但它直接更改图像而没有平滑过渡。如何为背景图片平滑过渡？

最好的问候。

Answer 1

关于ajax成功回调你应该应用css转换，然后设置背景图像。例如淡出+设置新图像+淡入。

此处用于在图像标记上应用淡出的示例css代码。

img{-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
    width:50%; height:50%}


img:hover{opacity:0}

或者，您可以使用jquery，例如：

$( "#book" ).fadeOut( "slow", function() {
    // Animation fade-out complete
    $( "#book" ).fadeIn( "slow", function() {
       // Animation complete


    });

});

// =====所以=====

function loadBackground() {
    $.ajax({
        url: 'getimages.php',
        success : function(filename) {

        $( 'html' ).fadeOut( "slow", function() {
           // Animation fade-out complete


           $('html').css('background', 'url('+filename+') no-repeat center center fixed');
           $('html').css('-webkit-background-size', 'cover');
           $('html').css('-moz-background-size', 'cover');
           $('html').css('-o-background-size', 'cover');
           $('html').css('background-size', 'cover');


           $( 'html' ).fadeIn( "slow", function() {
             // Animation complete, finish


           });

        });



        }
    });
}

我建议使用特定的html元素而不是'html'，

背景切换时平滑过渡

1 个答案: