Определение курсора мыши перед событием
Здравствуйте!Как определить положение курсора до наступления событий(до того как будет подвинут курсор).код описывает движение объекта в соответствии с движением курсора.Нужно сделать так что бы объект находился относительно мыши до событий,а не так как указано в 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);
}
}
|
x3zone,
Изобразите поясняющий эскиз , посколь словами весьма туманно... |
Нужно.сдвинуть красный див относительно курсора до того как мышка начнёт движение.при загрузке у него 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; } |
<!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>
|
Спасибо!Но я имел ввиду другое.Что бы вы поняли что я имел ввиду:запустите этот код в браузере,уберите руку от мыши и обновите страницу.вы увидите что изначально див расположен в нулевой точке,то есть курсор мыши при загрузке страницы может быть в любом месте экрана,а див так и будет стоять в нулевой точке,и привяжется к курсору только после события(движение мыши).Можно ли привязать див к координатам курсора до того как пользователь возьмёт мышь в руку и осуществит событие?
|
Цитата:
Ведь мы можем открыть вкладку - а курсором внутрь не лезть (к примеру лазаем по менюшке браузера И потом, для корректного использования - необходимо каждый раз сбрасывать таймер, при отсутствии мыши на вкладке - в противном случае - число таймеров и скорость сближения будут увеличивацо при каждом уходе со вкладки и последующем приходе |
Цитата:
|
Вот предположим.при загрузке страницы курсор находится в body.То что курсор был на других вкладках или в меню браузера это опускаем.имено в body.Вот допустим ситуация такая:есть сайт с паралаксом который привязан к onmousemove те двигаешь мышкой по body и при этом рандомно движутся несколько слоёв.Допустим пользователь загрузил такой сайт(мы не знаем где именно в body находится его курсор) и после того как он шевельнул мышкой по body получается скачок всей анимации паралакса и привязка к курсор в то положение где происходит событие.Т.е. если бы координаты анимированных объектов были привязаны изначально, анимация началась бы из той точки где находились объекты относительно курсора и на сайте не было бы скачка всей этой анимации.Пробовал привязать координаты к onmouseover до наступления onmousemove но он так же срабатывает после того как шевельнёшь мышкой по body.Вот меня и мучает этот вопрос, реально ли это сделать?
|
x3zone,
:) body.onfocus ? |
вот пара примеров тут нет скачка(точнее есть но только при загрузке, но не после того как провёл мышкой)
http://plaxmove2.staticloud.com/ http://plaxmove.staticloud.com/ вот это я и не понимаю как сделать:) |
| Часовой пояс GMT +3, время: 00:27. |