Показать сообщение отдельно
  #3 (permalink)  
Старый 13.02.2017, 11:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

gazman,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #container{
    width: 300px;
    position: relative;
    overflow: hidden;
     height: 50px;
  }
  .string{
    width: 500px;
    position:  absolute;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  var string = $(".string");
  var cont = $("#container");

  var con_w   = cont.width();
  var con_p_l = cont.css("padding-left");
  var con_p_r = cont.css("padding-right");

  var con_len = parseInt(con_w) + parseInt(con_p_l) + parseInt(con_p_r);
  var str_lef = parseInt(string.css("left"));
  var str_wdh = parseInt(string.width());

  (function run ()
  {
    string.animate(
    {

      left: con_len + 'px'
    },
    {
      duration: 5000,
      complete: function()
      {
        string.css("left", - con_len + 'px')
        run();
      }
    });
  })();



});
  </script>
</head>

<body>

<div id="container">


    <p class="string">Бегущая строка на JavaScript...</p>


</div>


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