[英]Creating an animation that counts up to the browser's viewport dimensions
我目前有一個小的腳本,可以返回瀏覽器窗口的高度和寬度。 我遇到的麻煩是實現一種使高度和寬度從零計數到負載時當前尺寸的方法。 它的功能類似於: 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;}
jQuery的:
$(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);
}
新FIDDLE 。
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;
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.