创建计数到浏览器视口尺寸的动画

Creating an animation that counts up to the browser's viewport dimensions

本文关键字：动画 视口 浏览器 创建      更新时间：2023-09-26

我目前有一个返回浏览器窗口高度和宽度的小脚本。我遇到的问题是实现一种让高度和宽度在负载上从零计数到当前尺寸的方法。它的功能类似于这样：http://jsfiddle.net/YWn9t/但目标数字将是上述维度。这可以使用比 jsfiddle 更少的代码来完成吗？

.HTML： 

<div>
    <span></span>
    <span></span>
</div>

.CSS：

body {text-align: center;}
div {border: 2px solid #000; display: inline-block; padding: 5px 20px; vertical-align: middle;}
span:first-of-type:after {content: "|"; margin: 0 10px;}

j查询：

$(document).ready(function (e) {
    showViewportSize();
});
$(window).resize(function (e) {
    showViewportSize();
});
function showViewportSize() {
    var the_width = $(window).width();
    var the_height = $(window).height();
    $('span:first-of-type').text(the_width);
    $('span:last-of-type').text(the_height);
}

新小提琴。

.JS

$('#start').on('click', function(){
  var windowheight = $(window).height();
  var windowwidth  = $(window).width();
  $('.putmehere1').html('height: ' + 
                         windowheight + 
                         'width: ' + 
                        windowwidth);
  var startwidth = 0;
  var endwidth = windowwidth;
  var startheight = 0;
  var endheight = windowheight;
  var timer;
  var timer2;
timedCount();
timedCount2();

function timedCount()
{
   startwidth = startwidth + 1;
   timer = setTimeout(function(){timedCount()}, 20);
   $('.putwidth').html(startwidth);
   if (startwidth == endwidth)
      {
       clearTimeout(timer);
       startwidth = endwidth;
       }
}
function timedCount2()
{
   startheight = startheight + 1;
   timer2 = setTimeout(function(){timedCount2()}, 20);
   $('.putheight').html(startheight);
   if (startheight == endheight)
   {
       clearTimeout(timer2);
       startheight = endheight;
    }
}
 });
相关文章：