Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.09.2012, 17:20
Интересующийся
Отправить личное сообщение для x3zone Посмотреть профиль Найти все сообщения от x3zone
 
Регистрация: 30.08.2012
Сообщений: 26

Определение курсора мыши перед событием
Здравствуйте!Как определить положение курсора до наступления событий(до того как будет подвинут курсор).код описывает движение объекта в соответствии с движением курсора.Нужно сделать так что бы объект находился относительно мыши до событий,а не так как указано в css.Пробовал onmouseover но он возникает только после движения курсора.Подскажите как быть.Вот код:
window.onload = function(e){
	
	var a1 = document.getElementById("a1");
	var cont = document.getElementById("cont");
	cont.onmousemove = moveEvent;
	var timer;	
	var xPos;
	var yPos;
	var posObjx;
	var posObjy;
	
	function moveEvent(){
	var e;
	if(!e){
	e = window.event;
	}
	xPos = e.clientX;
	yPos = e.clientY;
	timer = setInterval(animateMove,50);
	}
	
	function animateMove(){
	posObjx = parseInt(a1.style.left);
	posObjy = parseInt(a1.style.top);
	a1.style.left = Math.round(xPos/30) + "px";
	a1.style.top = Math.round(yPos/40) + "px";
	clearInterval(timer);
	}
	
}
Ответить с цитированием
  #2 (permalink)  
Старый 01.09.2012, 17:22
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

x3zone,
Изобразите поясняющий эскиз , посколь словами весьма туманно...
Ответить с цитированием
  #3 (permalink)  
Старый 01.09.2012, 17:33
Интересующийся
Отправить личное сообщение для x3zone Посмотреть профиль Найти все сообщения от x3zone
 
Регистрация: 30.08.2012
Сообщений: 26

Нужно.сдвинуть красный див относительно курсора до того как мышка начнёт движение.при загрузке у него left:0 и top:0, как изменить их значение до того как начнёшь двигать мышкой.что бы не было рывка дива из точки 0 к положению относительна курсора.вот остальной код.

html:
<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" type="text/css" href="my_styles.css">
<script type="text/javascript" src="my_script.js"></script>
</head>
<body>
<div id="cont">
<div id="a1" style="left:0px; top:0px;"></div>
</div>
</body>
</html>


CSS:
body{
margin:0;
}
#a1{
height:100px;
width:200px;
background-color:red;
position:relative;
}

#cont{
height:2000px;
width:100%;
background-color:green;
}
Ответить с цитированием
  #4 (permalink)  
Старый 01.09.2012, 18:14
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Форумы</title>

</head>
<body style="width:100%;">


<style type="text/css">
body{
 margin:0;
 }
 #a1{
 height:100px;
 width:200px;
 background-color:red;
 position:relative;
 }

 #cont{
 height:2000px;
 width:100%;
 background-color:green;
 }
</style>


<div id="cont">
	<div id="a1" style="left:0px; top:0px;"></div>

</div>
<script type="text/javascript">
window.onload = function(e){
	
	var a1 = document.getElementById("a1");
	var cont = document.getElementById("cont");
	cont.onmousemove = moveEvent;
	var timer;	
	var xPos;
	var yPos;
	var posObjx;
	var posObjy;
	
	function moveEvent(){
	var e;
	if(!e){
	e = window.event;
	}
	xPos = e.clientX;
	yPos = e.clientY;
	timer = setInterval(animateMove,50);
	}
	
	function animateMove(){
	posObjx = parseInt(a1.style.left);
	posObjy = parseInt(a1.style.top);
	a1.style.left = posObjx + Math.round((xPos-posObjx)/(1+Math.abs(yPos-posObjy))) + "px";
	a1.style.top =posObjy + Math.round((yPos-posObjy)/(1+Math.abs(yPos-posObjy))) + "px";
	clearInterval(timer);
	}
	
}

</script>
</body>
</html>

Последний раз редактировалось Deff, 01.09.2012 в 18:16.
Ответить с цитированием
  #5 (permalink)  
Старый 01.09.2012, 18:59
Интересующийся
Отправить личное сообщение для x3zone Посмотреть профиль Найти все сообщения от x3zone
 
Регистрация: 30.08.2012
Сообщений: 26

Спасибо!Но я имел ввиду другое.Что бы вы поняли что я имел ввиду:запустите этот код в браузере,уберите руку от мыши и обновите страницу.вы увидите что изначально див расположен в нулевой точке,то есть курсор мыши при загрузке страницы может быть в любом месте экрана,а див так и будет стоять в нулевой точке,и привяжется к курсору только после события(движение мыши).Можно ли привязать див к координатам курсора до того как пользователь возьмёт мышь в руку и осуществит событие?
Ответить с цитированием
  #6 (permalink)  
Старый 01.09.2012, 19:10
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от x3zone
до того как пользователь возьмёт мышь в руку и осуществит событие?
Э Тяжело представить - к примеру мышь была на иной вкладке - т.е как мышь попала на BODY - сразу привязываем к мыши ?

Ведь мы можем открыть вкладку - а курсором внутрь не лезть (к примеру лазаем по менюшке браузера

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

Последний раз редактировалось Deff, 01.09.2012 в 19:15.
Ответить с цитированием
  #7 (permalink)  
Старый 01.09.2012, 19:24
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от x3zone
.Можно ли привязать див к координатам курсора до того как пользователь возьмёт мышь в руку
координаты мыши мы можем определить только через событие какое нибудь
Ответить с цитированием
  #8 (permalink)  
Старый 01.09.2012, 20:06
Интересующийся
Отправить личное сообщение для x3zone Посмотреть профиль Найти все сообщения от x3zone
 
Регистрация: 30.08.2012
Сообщений: 26

Вот предположим.при загрузке страницы курсор находится в body.То что курсор был на других вкладках или в меню браузера это опускаем.имено в body.Вот допустим ситуация такая:есть сайт с паралаксом который привязан к onmousemove те двигаешь мышкой по body и при этом рандомно движутся несколько слоёв.Допустим пользователь загрузил такой сайт(мы не знаем где именно в body находится его курсор) и после того как он шевельнул мышкой по body получается скачок всей анимации паралакса и привязка к курсор в то положение где происходит событие.Т.е. если бы координаты анимированных объектов были привязаны изначально, анимация началась бы из той точки где находились объекты относительно курсора и на сайте не было бы скачка всей этой анимации.Пробовал привязать координаты к onmouseover до наступления onmousemove но он так же срабатывает после того как шевельнёшь мышкой по body.Вот меня и мучает этот вопрос, реально ли это сделать?
Ответить с цитированием
  #9 (permalink)  
Старый 01.09.2012, 20:08
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

x3zone,
body.onfocus ?
Ответить с цитированием
  #10 (permalink)  
Старый 01.09.2012, 20:14
Интересующийся
Отправить личное сообщение для x3zone Посмотреть профиль Найти все сообщения от x3zone
 
Регистрация: 30.08.2012
Сообщений: 26

вот пара примеров тут нет скачка(точнее есть но только при загрузке, но не после того как провёл мышкой)

http://plaxmove2.staticloud.com/

http://plaxmove.staticloud.com/

вот это я и не понимаю как сделать
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
Изменение курсора мыши ShamanA Events/DOM/Window 4 28.01.2013 11:38
"Защита от дурака" при многократном наведении курсора мыши на картинку Trish jQuery 4 13.02.2012 17:07
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 21:07
Удалить ряд символов перед или после курсора до определенного сивола brd Javascript под браузер 3 30.10.2009 07:20