Форум

gazman · #1 (**permalink**) 13.02.2017, 10:34

здравствуйте

делаю бегущую строку. помогите всё это дело зациклить. срабатывает один раз. делаю клон и вызываю эту же функцию в колбеке. где неправильно?

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

$(document).ready( 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(
		{
			position: "absolute",
			left: con_len + 'px' 
		}, 
		{
			duration: 3000,
			complete ()
			{
				string.clone()
				.css("left", -str_wdh + 'px')
				.appendTo("#container");
				$(".string:first").remove();
				run();
			}
		});
	});
	
});

рони · #2 (**permalink**) 13.02.2017, 11:04

Сообщение от gazman

complete ()

рони · #3 (**permalink**) 13.02.2017, 11:29

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>

gazman · #4 (**permalink**) 15.02.2017, 14:20

спасибо. ваш вариант проще.

можно ли как-то динамически отследить перемещение строки?
т.е. я хочу, чтобы как только строка коснётся правого борта, сразу начала появляться эта же строка слева.
сейчас пока анимация не закончится строка не появляется.

Форум

Справочник

Discord чат

Курсы javascript