0

我想将 div 降低到某个高度以显示一些额外的内容。为此，我编写了以下 dropbox() 函数：

  <script type="text/javascript">
  function sleep(milliseconds) {
        var start = new Date().getTime();
        for (var i = 0; i < 1e7; i++) {
          if ((new Date().getTime() - start) > milliseconds){
          break;
          }
        }
      }

  function dropbox(element){
    var obj = document.getElementById(element);
    if(obj) {
      var element = document.getElementById(element),
          style = window.getComputedStyle(element),
          height = style.getPropertyValue('height');
          height = height.substring(0,2);
      var i = 0;
      for (i = height; i<200; i++)
        {
        sleep(100);
        var tst = i+"px";
        //alert(tst);
        obj.style.height = tst;
        }
        //alert(i);

    } else {
    }
  }
  </script>

现在我遇到的问题是，该框实际上在下滚过程中不可见，但只有在循环完成后，但我希望它看起来像http://www.thedana上的“检查可用性”框.com/。我如何完成这项工作？

谢谢！

4

2 回答 2

1

您不能在浏览器 javascript 中使用循环延迟，因为它会使浏览器对输入和屏幕更新都没有响应，并浪费移动设备上的电池。

相反，您应该使用setTimeout()which 让您在未来的某个时间安排活动。好的动画使用补间算法来安排动画的下一个刻度，然后比较经过的时间并计算下一个动画步骤应该在哪里绘制，并以这种方式不断地自我校正。

此外，如果您在 Google 上搜索javascript animation，您会发现许多有用的预先编写的代码，用于使用纯 JavaScript 制作动画。此外，所有主要的 javascript 库（如 jQuery 或 YUI）都内置并为您编写了重要的动画功能。

这是一个简单的例子：

function dropbox(elem, finalHt, duration) {
    var start = new Date().getTime();
    var tick = 20;
    var startHt = parseInt(elem.style.height, 10);
    var growHt = finalHt - startHt;

    function next() {
        var now = new Date().getTime();
        var percent = (now - start) / duration;
        var target = Math.round(startHt + (growHt * percent));
        elem.style.height = Math.min(target, finalHt) + "px";
        if (target < finalHt) {
            setTimeout(next, tick);
        }
    }

    setTimeout(next, tick);
}


function run() {
    var item = document.getElementById("box"); 
    item.style.height = "10px";    
    dropbox(item, 300, 2000);
}

工作示例和更通用的代码：http: //jsfiddle.net/jfriend00/QxXMK/

于 2012-10-04T04:53:32.973 回答
1

这是一个示例代码。它可以帮助你

<div class="right_content">

         We deliver quick and easy registration.
        Mysites.com is our hosting server and we've buit our website under observation of Mysite.com

      </div>
        <p class="flip">Know About us</p>
     </div>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
    </script>
   <script type="text/javascript"> 
    $(document).ready(function(){
    $(".flip").mouseover(function(){
        $(".right_content").slideToggle("slow");
      });
    });
  </script>
于 2012-10-04T04:59:11.440 回答