jQuery：向下滑动并以特殊方式将一个背景图像替换为另一个背景图像

Posted 2023-03-13

【中文标题】jQuery：向下滑动并以特殊方式将一个背景图像替换为另一个背景图像

【英文标题】：jQuery: slide down and replacing one background image with another one in a special manner

【发布时间】：2012-08-13 06:58:51

【问题描述】：

这是一个代码jsFiddle。

有 2 张图片：新的（现代的）一张和旧的一张。在我的示例中，当您按下链接“单击此处向下滑动”时，所有内容都会正确向下滑动（尽管我没有拉伸图像以使它们彼此适合，这只是一个示例）。

但是，我希望新图像（现代）没有滑落，而是被旧图像（由旧谷歌）顺利替换。例如，当滑块位于页面中间时，该滑块上方会出现一半旧 Google，而该滑块上方会消失一半现代 Google。那时，现代图像的下部仍在滑块下方。 结果，如果图像包含相同的文本，彼此适合，但颜色不同，则您可以在滑动的任何时候从该图像中读取整个文本。 我希望我解释得当。

【参考方案1】：

这就是你想要的。

背景图片应保持原位，因此 div 与底部对齐。

http://jsfiddle.net/uniisland/9h58G/1/

【讨论】：

对不起，绿色框，滑块应该像它们一样向下滑动。但是，图像应该从顶部消失 - 它不会移动，而是从顶部边框消失。请参阅我的问题中的解释。谢谢。

@Haradzieniec 我明白了。现在我明白你的意思了。等一下。

哇，看起来很完美。谢谢。但是，它在 FF-perfect、Chrome-perfect、Opera-perfect 和 IE 中进行了测试。 IE 不起作用（根本不会向下滑动）。在 IE 8.0 中测试。

@Haradzieniec 哪个部分不动？还是什么都不动？

@Haradzieniec 我不确定这里出了什么问题。 js和css规则其实很简单。确保您了解它的工作原理，并在您自己的网站上测试它的浏览器兼容性。因为 jsfiddle 包含 iframe 和其他复杂性。

【参考方案2】：

我不确定是否是一个解决方案，但是：

我已经将 body css 包裹在一个 div 中：

<div id="bg"></div>

#bg
     height: 100%;
     width: 100%;
     background-color: #d1e3ec;
     background-image: url(http://googlechrometutorial.com/images/google-chrome-home.jpg);
     background-repeat: no-repeat;
     background-position: top center;
     position: absolute;

然后我们可以使用动画不透明度（或其他淡入淡出...）：

 $('#bg').css('opacity', 0);
 $('#slide-link').click(function()

 var hid = $('#sliderWrapper').is(':hidden')            
 $(this).animate( top: (1-hid)*($(window).height()) ,1500)
      if(hid) 
           $('#bg').animate('opacity':0, 1000);
           $('#sliderWrapper').stop().show("slide",  direction:"down" , 1500);
       else 
           $('#bg').animate('opacity':1, 1000);                                
           $('#sliderWrapper').stop().hide("slide",  direction:"down" , 1500); 
                
 )