Показать сообщение отдельно
  #19 (permalink)  
Старый 04.06.2017, 21:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

animate step
Smurf,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body, html{
    height: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .item{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    margin: auto;
    width:0;
    height: 0;
    background-color: #FF00FF;
    text-align: center;
    font-size: 48px;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    var div = $("<div class='item'></div>"),
        timer, d = [0, 0];
    $("body").append(div);
    $(window).resize(function() {
        window.clearTimeout(timer);
        timer = window.setTimeout(function() {
            var w = $(window).width(),
                h = $(window).height();
            div.stop().animate({
                width: w,
                height: h
            }, {
                duration: 12E3,
                step: function(a, t) {
                    if (t.prop == "width") d[0] = a | 0;
                    if (t.prop == "height") d[1] = a | 0;
                    div.text(d.join(" x "))
                }
            })
        }, 100)
    }).resize()
});
  </script>
</head>

<body>
</body>
</html>
Ответить с цитированием