Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.10.2013, 00:13
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

Расчет положения элемента
Здравствуйте подскажите пожалуйста как сделать чтобы круг при изменении своего размера всегда оставлся в центре. никак не пойму почему при изменении высоты его позиция по икс и игрек сдвигается
http://jsfiddle.net/aYVtN/
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2013, 00:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Moloch,
зачем делим на 2?
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2013, 19:22
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

Все понял. а можете сказать как сделать чтобы когда width\height круга стали равными 0. функция остановилась и возобновилась только при нажатии на кнопку?
Ответить с цитированием
  #4 (permalink)  
Старый 30.10.2013, 20:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Moloch
а можете сказать как сделать чтобы когда width\height круга стали равными 0. функция остановилась и возобновилась только при нажатии на кнопку?
сделать ваш код ещё запутанней?! нет проблем
... туда ... сюда ... обратно ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type='text/css'>
    #container{
position:relative;
border: 1px solid #fff;
background-color: #ed7;
width:300px;
height:300px;
overflow:hidden;

}
#krug{
        background:url(http://www.rollogrady.org/media/wp-content/uploads/2008/11/mp3ico-150x150.gif) no-repeat ;
		background-size:contain;
        width: 300px;
        height: 300px;
        position: absolute;
        top: 0;
		left:0;
		opacity: 1;
		border-radius: 50%;
     }
  </style>
  <script>
   var rrr, stop = true;
   function infinityMove() {
   		var div1 = document.getElementById('krug'),
   		    left = parseInt(getComputedStyle(div1).left, 10),
   		    width,
   		    opacity = 1,
   		    max2 = 300,
            z = document.getElementById ('vkl');
   		setTimeout(function timer()
   				{

   						left += (setWay(left, 150, 0))? 1: -1;

   						div1.style.left = left+ 'px';
   						div1.style.top = left+ 'px';
   						//alert(div1.style.left)
   						opacity = 1 - (left/150);
   						width = max2-2*left;
   						div1.style.opacity = opacity;
   						div1.style.width = width + 'px';
   						div1.style.height = width + 'px';

   						stop && (rrr = setTimeout(timer, 10));
  						!stop && (z.value = z.value == 'Туда'? 'Сюда': 'Туда');
   				}, 100
   		);

   }

   var setWay = (function()
   		{

   				var ltr = true;

   				return function(position, firstValue, lastValue) {
   						stop = ltr;
   						if(position >= firstValue) {
   								ltr = false;
   						}
   						if(position <= lastValue) {
   								ltr = true;
   						}
   						stop = (ltr == stop)
   						return ltr;

   				}

   		}
   )();

   function clc()

   {
   		clearTimeout(rrr);
   		infinityMove();

   }
  </script>
</head>

<body>
 <div id ="container">
 <div id="krug"></div>
 </div>
<input id = "vkl" type="button" value="Туда" onclick="clc();">
</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 30.10.2013, 21:33
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

большое спасибо. я новичок в js а можно ли данный код упростить как? а то я и сам в нем путаюсь
Ответить с цитированием
  #6 (permalink)  
Старый 30.10.2013, 21:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Moloch
можно ли данный код упростить
можно но лучше прочитать Основы программной анимации на JavaScript
Ответить с цитированием
  #7 (permalink)  
Старый 30.10.2013, 21:45
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

пасиба! а то прям не знаю с чего начать js изучать
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
как обратиться к items элемента из другого элемента и изменить его? Krepkii ExtJS 2 12.02.2013 14:53
теги в выделенном фрагменте woojin Events/DOM/Window 48 15.08.2012 19:13
Как то можно узнать ID HTML элемента вызвавшего JavaScript функцию? Opusel Events/DOM/Window 1 18.12.2011 18:36
Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента Lockpickup AJAX и COMET 17 25.04.2011 17:58