Форум

x3zone · #1 (**permalink**) 01.09.2012, 18:20

Здравствуйте!Как определить положение курсора до наступления событий(до того как будет подвинут курсор).код описывает движение объекта в соответствии с движением курсора.Нужно сделать так что бы объект находился относительно мыши до событий,а не так как указано в 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);
	}
	
}

Deff · #2 (**permalink**) 01.09.2012, 18:22

x3zone,
Изобразите поясняющий эскиз , посколь словами весьма туманно...

x3zone · #3 (**permalink**) 01.09.2012, 18:33

Нужно.сдвинуть красный див относительно курсора до того как мышка начнёт движение.при загрузке у него 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;
}

Deff · #4 (**permalink**) 01.09.2012, 19:14

<!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>

x3zone · #5 (**permalink**) 01.09.2012, 19:59

Спасибо!Но я имел ввиду другое.Что бы вы поняли что я имел ввиду:запустите этот код в браузере,уберите руку от мыши и обновите страницу.вы увидите что изначально див расположен в нулевой точке,то есть курсор мыши при загрузке страницы может быть в любом месте экрана,а див так и будет стоять в нулевой точке,и привяжется к курсору только после события(движение мыши).Можно ли привязать див к координатам курсора до того как пользователь возьмёт мышь в руку и осуществит событие?

Deff · #6 (**permalink**) 01.09.2012, 20:10

Сообщение от x3zone

до того как пользователь возьмёт мышь в руку и осуществит событие?

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

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

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

vadim5june · #7 (**permalink**) 01.09.2012, 20:24

Сообщение от x3zone

.Можно ли привязать див к координатам курсора до того как пользователь возьмёт мышь в руку

координаты мыши мы можем определить только через событие какое нибудь

x3zone · #8 (**permalink**) 01.09.2012, 21:06

Вот предположим.при загрузке страницы курсор находится в body.То что курсор был на других вкладках или в меню браузера это опускаем.имено в body.Вот допустим ситуация такая:есть сайт с паралаксом который привязан к onmousemove те двигаешь мышкой по body и при этом рандомно движутся несколько слоёв.Допустим пользователь загрузил такой сайт(мы не знаем где именно в body находится его курсор) и после того как он шевельнул мышкой по body получается скачок всей анимации паралакса и привязка к курсор в то положение где происходит событие.Т.е. если бы координаты анимированных объектов были привязаны изначально, анимация началась бы из той точки где находились объекты относительно курсора и на сайте не было бы скачка всей этой анимации.Пробовал привязать координаты к onmouseover до наступления onmousemove но он так же срабатывает после того как шевельнёшь мышкой по body.Вот меня и мучает этот вопрос, реально ли это сделать?

Deff · #9 (**permalink**) 01.09.2012, 21:08

x3zone,

body.onfocus ?

x3zone · #10 (**permalink**) 01.09.2012, 21:14

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

http://plaxmove2.staticloud.com/

http://plaxmove.staticloud.com/

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

Форум

Справочник

Discord чат

Курсы javascript