个人中心
gpt4 book ai didi

javascript - 如何使用 jQuery 实现从一张图片到另一张图片的过渡效果？

转载 作者：行者123 更新时间：2023-11-28 17:18:31 25 4
gpt4 key购买 nike

以下代码创建了当一个图像变为白色然后白色被另一个图像更改时的效果 (demo):

HTML:

<body>
    <div class="page-bg" id="page-background1"></div>
    <!-- <div class="page-bg" id="page-background2"></div> -->
</body>

JavaScript:

url = "http://example.com/picture.png";

$("#page-background1")
    .animate({
    opacity: 0
}, 'slow', function () {
    $("#page-background1")
        .css({
        'background-image': 'url(' + url + ')'
    })
        .animate({
        opacity: 1
    });
});

但我想直接用另一个图像更改一个图像(中间没有白色)，但具有淡出/淡入效果。我应该怎么做？看起来使用第二个 div 应该有所帮助，但我找不到有效的解决方案。

最佳答案

已更新，我尝试申请Stacking elements with Z-index以获得预期的效果。我还创建了一种图像“堆栈”，其中针对隐藏的图像更改了 z-index；与“堆栈”中的其他图像相比，最近隐藏的元素更改为更小的 z-index 值。该代码支持 photos 数组中的多个图像，因为它为每个图像创建了一个单独的 div。

var photos = [{
  url: 'https://drscdn.500px.org/photo/97037403/m=900/d924fc03d69a82a604129011300916be'
}, {
  url: 'https://drscdn.500px.org/photo/97037259/m=900/030e1598b7822cd6c41beb4c7a4e466d'
}, {
  url: 'https://drscdn.500px.org/photo/97158643/m=900/4ae40d67ef546341111a32f5176694c8'
}];

//z-index, start value -1
//z-index can be either positive or negative value
//based on this answer http://stackoverflow.com/a/491105/2048391
var zIndex = -1;

//first foto in the array shown/hidden first
var visibleIndex = 0;

//initialize 
//by creating div for each image/url
for (i = 0; i < photos.length; i++) {
  var div = document.createElement("div");
  div.id = "page-background" + (i + 1);
  div.setAttribute("class", "page-bg");
  div.style.zIndex = zIndex;
  var url = "url('" + photos[i].url + "')";
  div.style.background = "#505D6E " + url + " no-repeat center center fixed";
  document.body.appendChild(div);
  zIndex = zIndex - 1;
  //and add div id to the photos array
  photos[i].id = "page-background" + (i + 1);
}


function changeBackground() {
  var hideItemIndex = visibleIndex % photos.length;
  var showItemIndex = (visibleIndex + 1) % photos.length;

  var hideItemId = "#" + photos[hideItemIndex].id;
  var showItemId = "#" + photos[showItemIndex].id;

  //hide current image with animation
  //after which show the next image with animation
  $(hideItemId).animate({
    opacity: 0
  }, "slow", function() {
    $(showItemId)
      .animate({
        opacity: 1
      }, "slow");

    //change z-index for the item that was hidden 
    //by moving it to the bottom of the stack
    $(hideItemId).css("z-index", zIndex);
    $(hideItemId).css("opacity", 1);

  });

  zIndex = zIndex - 1;

  visibleIndex = visibleIndex + 1;
}

//make sure that there's at least 2 images in the array
if (photos.length > 1) {
  setInterval(function() {
    changeBackground();
  }, 2000);
}
.page-bg {
  border: 1px solid black;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

与上述相同的另一种方法。下面只有可见和下一个 div 元素存在，隐藏的 div 出于性能原因被删除，如 LA_ 所建议的那样

var photos = [{
    url: 'https://drscdn.500px.org/photo/97037403/m=900/d924fc03d69a82a604129011300916be'
}, {
    url: 'https://drscdn.500px.org/photo/97037259/m=900/030e1598b7822cd6c41beb4c7a4e466d'
}, {
    url: 'https://drscdn.500px.org/photo/97158643/m=900/4ae40d67ef546341111a32f5176694c8'
}];

//z-index, start value 100000
//z-index could be a larger number
//based on this answer http://stackoverflow.com/a/491105/2048391
var zIndex = -1;

//first foto in the array shown/hidden first
var visibleIndex = 0;

//initialize 
//by creating div for each image/url
for (i = 0; i < photos.length; i++) {
    
    //only two images are created
    if (i < 2)
       createDiv(i, (i + 1) );

    //and add div id to the photos array
    photos[i].id = "page-background" + (i + 1);
}

function changeBackground() {
    var hideItemIndex = visibleIndex % photos.length;
    var showItemIndex = (visibleIndex + 1) % photos.length;
    
    var hideItemId = "#" + photos[hideItemIndex].id;
    var showItemId = "#" + photos[showItemIndex].id;

    //hide current image with animation
    //after which show the next image with animation
    $(hideItemId).animate({
        opacity: 0
    }, "slow", function () {
        $(showItemId)
            .animate({
            opacity: 1
        }, "slow");

        //remove the item that was hidden 
        $(hideItemId).remove();

    });
    
    var nextItemIndex = (visibleIndex + 2) % photos.length;
    //create the next div with picture
    createDiv(nextItemIndex, (nextItemIndex + 1) );

    visibleIndex = visibleIndex + 1;

}

//make sure that there is at least 2 photos 
if (photos.length > 1) {
    setInterval(function () {
        changeBackground();
    }, 2000);
}

function createDiv(index, divIdNro) {
      
    var div = document.createElement("div");
    div.id = "page-background" + divIdNro;
    div.setAttribute("class", "page-bg");
    div.style.zIndex = zIndex;
    var url = "url('" + photos[index].url + "')";
    //div.style.backgroundImage = url;
    div.style.background = "#505D6E " + url + " no-repeat center center fixed";
    document.body.appendChild(div);
    
    zIndex = zIndex - 1;    
}
.page-bg {
    border:1px solid black;
    height:100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

关于javascript - 如何使用 jQuery 实现从一张图片到另一张图片的过渡效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28211710/

25 4 0
文章推荐： python - 不应实例化的类
文章推荐： css - 从中间向 div 底部添加 box-shadow
文章推荐： html - 移动端的 Wordpress CSS
文章推荐： javascript - 使用 and 速记 if
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com