0

我打算播放边缘动画，一旦在页面中查看/滚动 div 动画部分，而不是循环播放。

所以我从问答中找出并找到了Rich Bradshaw 在此页面上显示的示例代码： Adobe Edge 生成的代码是否符合良好的编程实践？：

这是他展示的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Adobe EDGE TEST August 1, 2011</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="adobe_edge_test_edge.js"></script>
    <link rel="stylesheet" href="adobe_edge_test_edge.css"/>
<!--Adobe Edge Runtime End-->

<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>

</head><body onload="JavaScript:timedRefresh(4000);">
    <div id="stage" class="symbol_stage">
    </div>
</body>
</html>

我试图在我的示例 html 页面中实现它，我把

'onload="JavaScript:timedRefresh(500);"

如图所示，在 BODY 标记 html 内。

结果是，边缘动画重新加载整个页面以重新播放自己。然后我尝试将“onload”部分放在我用来显示边缘动画的 div 标签内，因为我认为“onload”部分将根据插入的位置工作

<div id="Stage" class="EDGE-109228010" onload="JavaScript:timedRefresh(5000);"> </div>

但这使得动画不起作用:(帮我解决这个问题，有没有办法让边缘动画仅在用户查看页面部分时播放？

4

1 回答 1

1

我在 Edge Animate 中创建了一个 creationComplete 事件处理程序，然后使用此处的 JS 代码检查 div 是否可见（检查滚动后元素是否可见）。这是我最终得到的代码：

  Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {
     // insert code to be run when the symbol is created here
     console.log('Start');

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
          && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
    }         

     $(window).on("scroll", function(e) {
         if(isScrolledIntoView(sym.element)) {
            console.log('Start me up'); 
             sym.play(0);
             $(window).off("scroll");
         }
     });


  });
于 2013-04-03T01:55:23.903 回答