Question

到目前为止（在此通讯的帮助下:)）我创建了一个完整的视口背景，可以打开点击。

由于我是初学者，我有两个问题：

1）代码＆＃34;好＆＃34;，还是我把它写成复杂的？

和Mainquestion：

如何在代码中添加淡入淡出效果？现在它有点难看，因为图像加载缓慢（口吃）。我想象这样的事情：

图片 - 点击 - 褪色黑色 - 褪色新图片 - 点击 - 褪色黑色---褪色新图片 - ..

这是我写的代码：

HTML：

<div class="t1">

</div>

CSS：

.t1 {
    background: url(pics/homescreen.JPG) no-repeat center center fixed ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
}

jQuery的：

$(function () {
    var y = 1;
    $('.t1').click(function () {
        var x = ['url(pics/screen1.jpg) no-repeat center center fixed',
            'url(pics/screen2.jpg) no-repeat center center fixed',
            'url(pics/schild.jpg) no-repeat center center fixed'
        ]
        $('.t1').css('background', x[y]);
        $('.t1').css('background-size', 'cover');
        if (y == 2) {
            y = 0;
        } else {
            y = y + 1;
        }
    });
})

Answer 1

演示： http://jsfiddle.net/bSAm2/ 这不包括预加载，但效果非常好。如果您对预加载器感兴趣，则可能需要在需要时一次预加载一个图像：在文档的前端加载所有图像或更糟糕，可能会减慢页面加载速度超过＆＃39是一个可接受的用户体验。此外，转换不适用于较旧的浏览器（请参阅here）

要为CSS属性设置动画，您可以使用http://api.jquery.com/animate/ 特别是，您可以通过设置其不透明度（为0）来淡出当前图像，然后，当此动画完成时，更改图像源（当它不可见时）并启动淡入动画。

为了获得最佳外观，您可以预加载图像＆＃34;只是在时间＆＃34;，例如，您可以预加载要显示的下一个图像，因此不会有任何延迟

修改

此示例有效，并使用闭包，以便您可以独立旋转多个图像：

$(function () { var images = ['url(http://lorempixel.com/output/people-q-c-640-480-8.jpg) no-repeat center center fixed', 'url(http://lorempixel.com/output/nature-q-c-640-480-8.jpg) no-repeat center center fixed', 'url(http://lorempixel.com/output/fashion-q-c-640-480-9.jpg) no-repeat center center fixed' ]; function bindSwitcher (elem) { var imageIndex = 0; return function switchImage () { elem.fadeOut(function (){ elem.css('background', images[imageIndex]); if (imageIndex == images.length - 1) { imageIndex = 0; } else { imageIndex += 1; } elem.css('background-size', 'cover'); elem.fadeIn(); }); }; } var imageSwitcher = bindSwitcher($('#t1')); $('#t1').click(imageSwitcher); $('#t2').click(bindSwitcher($('#t2'))); });

HTML和稍微改变以显示差异：

<div id="t1" class="t1" style="position: absolute; left:0%"> </div> <div id="t2" class="t1" style="position: absolute; left:50%"> </div>

Answer 2

演示：http://jsfiddle.net/abhitalks/FNUx8/8/

代码“好”，还是我把它写成复杂的？

你可以做的几件事是：

将您的图像数组放在click处理程序之外。每次点击发生时你都不想创建那个数组。
使用模数减少代码以循环数组。
使用this。
如果元素是唯一的，请使用id代替class直接定位元素。

因此，有效地将您的代码简化为：

var x = ['url(...1.jpg) no-repeat center center fixed',
        'url(...2.jpg) no-repeat center center fixed',
        'url(..3.jpg) no-repeat center center fixed'
];
var index = 0;

$('#t1').click(function () {
    index = (index + 1) % x.length;
    $(this).css('background', x[index]);
});

如何在代码中添加淡入淡出效果？现在它有点难看，因为图像加载缓慢（口吃）

（1。）您可以使用CSS3 transition：

#t1 {
    ...
    transition: 1s;
}

（2。）由于图像是在运行时加载的，因此存在卡顿现象。您可以通过预加载图片来避免这种情况：

一种方式可能是这样的：

var d = []; // create an array for holding dummy elements

for (var i = 0; i < x.length; i++) {
    d[i] = $("<img>"); // create an img and add to the array
    d[i].attr('src', x[i]).hide(); // add src to img and hide it
    $("body").append(d[i]); // add the img to body to start load
}

理想情况下将此代码包装在head中，以便在DOM准备就绪时完成此操作。将其余代码放在body末尾或.ready。

修改

更改预加载代码以使用img。更新了小提琴。

Answer 3

代码并不复杂，及时学会编写更干净（好）的代码。这是我的建议： 1.将x定义移到点击事件之外，在y后将其置于正确状态，y最初应为0; 2. if(y == 2)太静态，beter取数组if(y == x.length)的长度; 3.从脚本中删除background-size，它在css中设置; 4.对于淡入淡出效果，您可以执行以下操作：

$('.t1').fadeOut(300, function() {
   $(this).css('background', x[y]).fadeIn(300);
});

我没有测试过，但是应该做好。

如何用淡入淡出来改变背景图像

3 个答案: