Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.03.2009, 23:29
Интересующийся
Отправить личное сообщение для human Посмотреть профиль Найти все сообщения от human
 
Регистрация: 19.02.2009
Сообщений: 15

Плавающее изображение
есть такой вот скриптик
<script>
window.onload = function(){
init();

}

function init(){
var image = document.createElement("div")
	with(image.style){
		position = "absolute";
		left = "10px";
		top = "30px";
		width = "100px";
		height = "100px";
		border = "1px solid red"
		backgroundImage = "url(image_0.jpg)";
	}
	image.id = 'image';
	document.body.appendChild(image);
var text = document.createElement("div");
with(text.style){
		position = "absolute";
		left = "300px";
		top = "200px";
		width = "100px";
		height = "30px";
		border = "1px solid red"
	}	text.id='info';document.body.appendChild(text);
}
function go(){
var image = document.getElementById('image');
 scrollInterval = setInterval('xxx()', 2);
return false;

}
function xxx(){
var image = document.getElementById('image');
var left = parseInt(image.style.left);
document.getElementById('info').innerHTML = left;
if (left<500){
	image.style.left =left+4 + "px";
}
else{ clearInterval(scrollInterval);
image.style.left = "10px";

}
}

При нажатии на ссылку блок начинает движение!!!
Возможно ли сделать как ниубдь чтобы это было более гладко, а то во время движения появляются гллюки и небольшие искажения =(((
Заранее спасибо!!!
Ответить с цитированием
  #2 (permalink)  
Старый 17.03.2009, 09:50
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

в скрипт не вчитывался, но при беглом прочтении: я бы выставил поменьше интервал и шаг.
Ответить с цитированием
  #3 (permalink)  
Старый 17.03.2009, 16:45
Интересующийся
Отправить личное сообщение для human Посмотреть профиль Найти все сообщения от human
 
Регистрация: 19.02.2009
Сообщений: 15

ну и в результате вы получим очень медленный сдвиг =\
А нам нужно, чтоб расстояние от начало левого края до 600 px от левого края проходило где то за секунду.
вот как то ведь это реализовано в Image Flow
Ответить с цитированием
  #4 (permalink)  
Старый 17.03.2009, 16:56
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

ну так делай неравномерный сдвиг! Ты делаешь равномерный (по 4 пикселя прибавляешь), а надо делать неравномерный...
Ответить с цитированием
  #5 (permalink)  
Старый 17.03.2009, 17:35
Интересующийся
Отправить личное сообщение для human Посмотреть профиль Найти все сообщения от human
 
Регистрация: 19.02.2009
Сообщений: 15

всмысле =\ как раз и надо чтобы равномерно он ехал =\
Ответить с цитированием
  #6 (permalink)  
Старый 17.03.2009, 18:18
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

Сообщение от human
вот как то ведь это реализовано в Image Flow
тут неравномерное движение... Сначала приращение смещения маленькое, потом больше-больше, в середине движения - максимальное, потом уменьшается..
Ответить с цитированием
  #7 (permalink)  
Старый 17.03.2009, 21:54
Интересующийся
Отправить личное сообщение для human Посмотреть профиль Найти все сообщения от human
 
Регистрация: 19.02.2009
Сообщений: 15

ну эт я так к примеру привел =\
Задача состоит в равномерном движении!!
Ответить с цитированием
  #8 (permalink)  
Старый 18.03.2009, 09:22
Профессор
Отправить личное сообщение для AzriMan Посмотреть профиль Найти все сообщения от AzriMan
 
Регистрация: 27.02.2009
Сообщений: 215

Сообщение от human Посмотреть сообщение
ну и в результате вы получим очень медленный сдвиг =\
да ну? о чем вы говорите?!
если объект за секунду перемещается на 10 пикселей, то можно сделать таймер в пол секунды и двигать по 5 пикселей - в результате шаг будет меньше и "дерганье" будет заметно меньше. если двигать с таймером в пол секунды по 5 пикселей то за секунду объект в любом случае переместится на 10 пикселей, совершив два хода.

хотя.. если учесть погрешности, искажения времени, пространства и прочее.. то вполне может получиться так, что результате мы будем иметь ну ооочень медленный сдвиг.
Ответить с цитированием
  #9 (permalink)  
Старый 18.03.2009, 16:06
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Если вы внутри функции-аниматора будете изменять innerHTML объекта и получать его каждый раз через getElementById, то не мудрено, что у вас будет прерывистая и глючная анимация.
Ответить с цитированием
  #10 (permalink)  
Старый 18.03.2009, 17:16
Интересующийся
Отправить личное сообщение для human Посмотреть профиль Найти все сообщения от human
 
Регистрация: 19.02.2009
Сообщений: 15

Сообщение от AzriMan Посмотреть сообщение
да ну? о чем вы говорите?!
если объект за секунду перемещается на 10 пикселей, то можно сделать таймер в пол секунды и двигать по 5 пикселей - в результате шаг будет меньше и "дерганье" будет заметно меньше. если двигать с таймером в пол секунды по 5 пикселей то за секунду объект в любом случае переместится на 10 пикселей, совершив два хода.

хотя.. если учесть погрешности, искажения времени, пространства и прочее.. то вполне может получиться так, что результате мы будем иметь ну ооочень медленный сдвиг.
хм......вы меня опять не правильно поняли....
на сколько мне известно минимальную временную задержку которую мы можем использовать это 1 милисекунда...
ну допустим сделали мы так как вы предлогаете:
setInterval('xxx()', 1); // задержка в 1 милисекунду
и функции сдвига прирост делаем в 1 пиксель
в результате чего получаем очень медленную анимацию потому как за 1 мелисикунду проходит 1px
Начинаем увеличивать скорость путем увеличивания сдвига, ставим 2px и вот появились уже глюки на изображении при перемещении.

Хочу обратить ваше внимание на то, что если убрать изображение и просто двигать блок с какой то высотой и шириной + бордер
все будет работать нормально!!! Тоесть дергается только изображение, и мне не понятно почему =(((

Последний раз редактировалось human, 18.03.2009 в 17:30.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изображение не растягивать dovee Общие вопросы Javascript 1 10.02.2009 07:20