Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Скорость курсора (https://javascript.ru/forum/jquery/13508-skorost-kursora.html)

Беляш 01.12.2010 13:55

Скорость курсора
 
Привет Всем. Столкнулся с такой задачкой: необходимо определить скорость перемещения курсора. Гуглил не нашел, потом пробовал реализовать через .mousemove(), тоже не получилось. Мозг кипит не могу придумать как реализовать. Уже пробую внутри события .mouseover вызывать функцию с событием .mousemove(). Что есть:
<script type="text/javascript">
	var beforeX;
	var speed;
	$('html').mouseenter(function go(e){
			beforeX = e.pageX;
			speed = 0;
			$("#start").text('' + beforeX);
			move(e);
	});
	function move(e){
		$(document).mousemove(function(e){			
			$("#stop").text(e.pageX);
			speed = e.pageX-beforeX;
			$("#speed").text(speed);
			if(speed > 50){
				$("#speed").css({'color':'red'});
			}
			else{
				$("#speed").css({'color':'black'});
			}
		})
	};
</script>


Пока только по X смотрю, но не ужели нет более элегантного способа?

Yurok_shnurok 01.12.2010 14:02

Беляш, я в javascript не силен. Но может есть в jquery какой-нибудь таймер, который будет с определенным периодом выполнять функцию. И уже в этой функции выполнять расчет скорости курсора. Запомнить позицию курсора, и в функции найти разность между новыми координатами и старыми.

Беляш 01.12.2010 14:10

Yurok_shnurok, Когда мозг еще был свежь когда я только подумал об этом тоже решил что сделаю так, но почему-то вызов .delay(1000) - задержка на 1000 милисекунд не срабатывала.:(

Yurok_shnurok 01.12.2010 15:08

попробуй вот этот пример подстроить под свои нужды

Gvozd 01.12.2010 15:19

мимо крокодил:
когда один новичек начинает советовать другому, сам еще не зная ни капли языка, это просто смешно
Yurok_shnurok,
вам еще рано отвечать на вопросы других новичков

Беляш,
в вашем коде я пока вижу только измерение пройденного растояния, но не скорость.
для того чтобы получить скорость, надо поделить расстояние на время
а setTimeout вам тут незачем

Yurok_shnurok 01.12.2010 15:25

Что-то никто из знаюших не стал помогать, если уж у Вас Gvozd достаточно знаний, что подсказать как определять растояние пройденое мышью, так написали бы. А для того чтобы понять, что скорость это расстояние/время язык знать не нужно.

monolithed 01.12.2010 15:31

Цитата:

Сообщение от Yurok_shnurok
растояние пройденое мышью

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

Yurok_shnurok 01.12.2010 15:32

а setTimeout я посоветовал потому, что допустим во флэш событие onmousemove реагирует на движение мыши, и как узнать скорость, если будет срабатывать функция на перемещение в определенное кол-во пикселей.

Gvozd 01.12.2010 15:54

Yurok_shnurok,
стоп
так вы именно расстояние не можете определить?
а ну марш в школу!
определить расстояние между двумя точками на плоскости по их координатам - это элементарная задача из школьной программы
и вам и вправду не стоит давать консультации.
как минимум до получения среднего образования.
Цитата:

Сообщение от Yurok_shnurok
а setTimeout я посоветовал потому, что допустим во флэш событие onmousemove реагирует на движение мыши, и как узнать скорость, если будет срабатывать функция на перемещение в определенное кол-во пикселей.

в JS mousemove Также реагирует на перемещение мыши
даже если бы нужно было указывать скорость в тот момент, когда мышь стоит, то одним seTimeout не обойтись, так как он не гарантирует точное время.
время придется отдельно измерять

monolithed 01.12.2010 16:01

Вот грубое и неотесанное решение для размышления:

<div></div>
<script type="text/javascript">
var i = 0;
document.onmousemove = function(){
    document.getElementsByTagName('div')[0].innerHTML = ++i/100;
};   

</script>

Yurok_shnurok 01.12.2010 16:24

А почему Вы решили, что я не умею определять расстояние между двумя точками?

рони 01.12.2010 22:42

Yurok_shnurok,
Вариант )))
<div></div>
<script type="text/javascript">
var i = 0;
document.onmousemove = function () {
    document.getElementsByTagName("div")[0].innerHTML = i > 100 ? 0 : ++i / 100;
    window.setTimeout(function (a) {
        return function () {
            if (a == i) {
                i && v_in_div(i);
                i = -1
            }
        }
    }(i), 20)
};

function v_in_div(a) {
    b = document.createElement("div");
    b.style.cssText = "height: 5px;width: " + a + "px;background-color: " + (a > 50 ? "#FF0000" : "#00FF00");
    document.body.appendChild(b)
};
</script>

Aetae 02.12.2010 02:00

Цитата:

Сообщение от рони (Сообщение 81849)
Yurok_shnurok,
Вариант )))

Боль-мене правильный вариант, эксплуатирующий идею)
<style>div {float:left;} *{margin:0;padding:0}</style>
<script type="text/javascript">
X=Y=d=0
document.onmousemove = function(e){
var x=e.clientX,y=e.clientY;
with(Math) {d+=floor(sqrt(pow(x-X,2)+pow(y-Y,2))/3)}
X=x;Y=y;
};
setInterval(function(){document.body.appendChild(document.createElement("div")).style.cssText = 'width:1px;height:'+d+'px;background-color:rgb('+(d<255?d:255)+',0,0)';d=0;},100)
</script>

VGVolkov 18.01.2018 13:59

а зачем на 3 делил??? при расчете гипотенузы?

Aetae 18.01.2018 14:07

Чтоб красиво вписалось в окошко ответа, не более.)


Часовой пояс GMT +3, время: 02:58.