Показать сообщение отдельно
  #6 (permalink)  
Старый 27.01.2013, 16:04
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

как вариант формула для расчёта времени на оставшуюся часть анимации
var time=10000+parseInt( $(this).css('margin-left') ) / ( $(this).width()/2 )*10000

фактически считаю число пройденных процентов
умножаю на время чтобу узнать сколько времени потрачено
затем вычитаю потраченное время из отведённого на анимацию (+ потомучто потраченное время это отрицательное число)

результат
<!DOCTYPE HTML>
<html>
  <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <style>
    /*-- Menu Styles Start --*/
*{margin:0;padding:0;}
body{background-color: #C0C0C0;color:#CCC;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:18px;padding:100px 0;width:100%;}
.content{
    background-color: #333333;
    height: 55px;
    margin: 0 auto;
    overflow: hidden;
    padding: 50px 0;
    width: 1200px;}
div#header-scrolling-text {
    border-left: 1px solid #828282;
    border-right: 1px solid #828282;
    display: inline;
    float: right;
    height: 29px;
    margin: 13px 150px 13px 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 350px;
}
div#header-scrolling-text div.container {
    overflow: hidden;
    position: relative;
    top: 5px;
    width: 600px;/* -- Ширина блока с текстом -- */
}
div#header-scrolling-text div.container div {
}
div#header-scrolling-text div.container div span {
    display: -moz-inline-box;
}
div#header-scrolling-text div.container div span p {
    margin: 0;
    }
   
    
div#header-scrolling-text div.container div span p a {
    color: #FF0000;
    text-decoration: none;
}
div#header-scrolling-text div.container div span p a:hover {
    color: #FF0000;
}
/*-- Menu Styles End --*/
    </style>
    </head>
  <body>

    <script>
      
$(document).ready(function(){

//Scrolling Text
	$(function(){
		//Initial Settings
		var marquee = $('#scrolling-text');
		marquee
			.wrapInner('<span>');
		marquee
			.find('span')
			.css({'width':'50%', 'display':'inline-block', 'text-align':'center'});
		marquee
			.append(
				marquee
					.find('span')
					.clone()
			);
		marquee
			.wrapInner('<div>');
		marquee
			.find('div')
			.css('width', '200%');
		//
		var reset = function(){
          //alert(жreset);
			$(this)
				.css('margin-left', '0%');
			$(this)
				.animate({'margin-left': '-100%'}, 10000, 'linear', reset);
		};
		//
		reset.call(
          marquee.find('div') 
        );
	
      //Stop/Start Scrolling
      marquee.find('div').hover(
        function(){
            $(this).stop(false,false);
        },
                                             
        function(){     
          var time=10000+parseInt( $(this).css('margin-left') )/($(this).width()/2)*10000          
           $(this).animate({'margin-left': '-100%'}, time, 'linear',reset);
        });                                
    });


});

    </script>

    <div class="content">

<!-- Scrolling Text Start -->
	<div id="header-scrolling-text">
		<div id="scrolling-text" class="container">
			<p>
				<a title="Якорь ссылки" href="#">Пример ссылки</a> - текст новости или рекламного объявления или краткой информации и фирме.
			</p>
		</div>
	</div>
<!-- Scrolling Text End -->

</div>

  </body>
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 27.01.2013 в 16:12.
Ответить с цитированием