Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2017, 10:34
Аспирант
Отправить личное сообщение для gazman Посмотреть профиль Найти все сообщения от gazman
 
Регистрация: 02.09.2015
Сообщений: 38

бегущая строка на jquery
здравствуйте

делаю бегущую строку. помогите всё это дело зациклить. срабатывает один раз. делаю клон и вызываю эту же функцию в колбеке. где неправильно?
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

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

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>
Ответить с цитированием
  #4 (permalink)  
Старый 15.02.2017, 14:20
Аспирант
Отправить личное сообщение для gazman Посмотреть профиль Найти все сообщения от gazman
 
Регистрация: 02.09.2015
Сообщений: 38

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

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

Последний раз редактировалось gazman, 15.02.2017 в 14:34.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 09:01
Бегущая строка динамическое обновление nikolaygrand Общие вопросы Javascript 4 01.02.2013 08:51
Предполагается наличие ';' в IE7- FINoM (X)HTML/CSS 5 25.08.2012 16:05
Бегущая строка ira_lala Общие вопросы Javascript 8 12.05.2012 15:20
2 разных модуля на jQuery - как подключить? finder jQuery 4 23.03.2012 22:29