2

这是一个代码jsFiddle。

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

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

4

2 回答 2

2

这就是你想要的。

背景图像应保持在原位，因此 div 与底部的页面对齐。

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

于 2012-08-13T07:26:17.583 回答
0

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

我已经将 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); 
      }          
 })
于 2012-08-13T08:07:40.833 回答