问使用Superscrollorama进行Javascript页面擦除过渡
EN

Stack Overflow用户

提问于 2012-07-04 12:38:48

回答 1查看 2.9K关注 0票数 2

我试图做的是让页面的不同部分滑动起来，并掩盖前一部分。我在http://johnpolacek.github.com/superscrollorama/找到了我想要做的事情，特别是“擦除”部分。我尝试复制一些代码并包含相同的javascript文件。

在Firefox中，它是有效的。然而，在Chrome和IE中，当我试图向下滚动时，滚动条会抖动并弹回页面顶部。

我没有把它放在网站上，但我有我正在使用的文件：http://www.mediafire.com/?h28etrbr5t24qyw

任何帮助(或更实用的替代方案)都将非常感谢。

javascript

transition

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-07-04 13:34:58

是啊，看起来很酷。我会从头开始创建代码，这样你就可以完全按照你想要的方式得到它。我刚刚创建了一些非常基本的东西。一个蓝色的main div和一个红色的div，可以擦除。显然，您可以在这两个div上放置任何您想要的东西。代码如下：

<!doctype html>
<html>
  <head>
    <style type='text/css'>
      body{
        margin: 0px;
      }
      #wipeScreen{
        position: fixed;  
        width: 100%;                  
        background-color: red;
      }

      #mainScreen{
        position: absolute;
        background-color: blue;
        height: 200%;
        width: 100%;
      }
    </style>
    <script type='text/javascript'>
      var visHeight;
      function loadConstants(){
        visHeight = Math.ceil(document.getElementById("mainScreen").offsetHeight/2);
        var wipeScreen = document.getElementById("wipeScreen");
        wipeScreen.style.height = visHeight+"px";
        wipeScreen.style.top = -visHeight+"px";
        window.onscroll = runScroller;
      }
      function runScroller(){
        document.getElementById("wipeScreen").style.top = pageYOffset-visHeight+"px";
      }    
    </script>        
  </head>
  <body onload='loadConstants()'>
    <div id='mainScreen'></div>
    <div id='wipeScreen'></div>  
  </body>
</html>

将其复制并粘贴到HTML文档中，您就会明白我的意思

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11322489

复制

相似问题

问使用Superscrollorama进行Javascript页面擦除过渡
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Superscrollorama进行Javascript页面擦除过渡EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Superscrollorama进行Javascript页面擦除过渡
EN