Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   С какой стороны заходит мышь! (https://javascript.ru/forum/events/24968-s-kakojj-storony-zakhodit-mysh.html)

KupueIIIKo 20.01.2012 16:21
С какой стороны заходит мышь!
 
Есть мануал или примеры чтоб определить с какой стороны наводится мышь в div! То есть слева, справа или сверху?

dmitriymar 20.01.2012 17:27
отслеживая координаты мыши при событии onmouseover и изменение их при последующем движении её над контейнером .
какие мануалы? какие примеры на "5 строк" кода?

KupueIIIKo 20.01.2012 17:42
Без координат ни как?

dmitriymar 20.01.2012 17:46
Цитата:
Сообщение от KupueIIIKo
Без координат ни как?
ну расположи сверху каждой из 4х сторон дива по контейнеру с 1 пиксельной шириной. при событии маусовер у любого из них можно определить с какой стороны вход был

Маэстро 20.01.2012 20:15
Цитата:
Сообщение от dmitriymar (Сообщение 151710)
ну расположи сверху каждой из 4х сторон дива по контейнеру с 1 пиксельной шириной. при событии маусовер у любого из них можно определить с какой стороны вход был
-плохо. при быстром движении мыши "маусовер" на однопиксельном диве может не возникнуть.

dmitriymar 20.01.2012 20:35
Цитата:
Сообщение от Маэстро
-плохо. при быстром движении мыши "маусовер" на однопиксельном диве может не возникнуть.
какое отношение имеет возникновение события к отслеживанию координат курсора?
боюсь что возникнет в любом случае. а то что не возникнет -это связанно с "провалом события" и имеет своё лечение.

Pavel M. 21.01.2012 11:03
попробовал на jquery сделать
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>

	<script>
	$(function(){
		$('div').mouseenter(function (e) {
			var jEl = $(this),
				w = jEl.outerWidth(),
				h = jEl.outerHeight(),
				off = jEl.offset(),
				x = e.pageX - off.left,
				y = e.pageY - off.top,
				xShift, // сдвиг от правой или левой границы
				yShift, // сдвиг от верхней или нижней границы
				xText,
				yText,
				itogText;

			if (x / w > .5) {
				xShift = w - x;
				xText = 'справа';
			} else {
				xShift = x;
				xText = 'слева';
			}
			
			if (y / h > .5) {
				yShift = h - y;
				yText = 'снизу';
			} else {
				yShift = y;
				yText = 'сверху';
			}
			
			itogText = (xShift < yShift) ? xText : yText;
		   
			jEl.text(itogText);
		});
	});  

	</script>
</head>
<body>
	<div style="width: 100px; height: 100px; padding: 20px; margin: 20px; background: red;"></div>
</body>
</html>

Маэстро 21.01.2012 13:11
Цитата:
Сообщение от dmitriymar (Сообщение 151729)
какое отношение имеет возникновение события к отслеживанию координат курсора?
боюсь что возникнет в любом случае. а то что не возникнет -это связанно с "провалом события" и имеет своё лечение.
-В задаче не было сказано ни слова о координатах. Человеку надо узнать направление, т.е. факт сверху/снизу/слева/справа.
-"провалы" я и имел ввиду.

dmitriymar 21.01.2012 15:00
Цитата:
Сообщение от Маэстро
"провалы" я и имел ввиду.
дак а какое отношение имеют провалы к ширине блока?

Маэстро 23.01.2012 13:31
Цитата:
Сообщение от dmitriymar (Сообщение 151847)
дак а какое отношение имеют провалы к ширине блока?
Событие onmouseover не является гарантированным. При малой ширине блока (1 px) и быстром перемещении мыши оно может не возникнуть.
Для таких целей надо постоянно обрабатывать событие OnMouseMove, вычислять координаты мыши и по двум последним засечкам и определять вектор её перемещения.

Pavel M. 23.01.2012 16:33
попробовал сделать на css (просто захотелось :-))
чтобы сторона с которой зашла мышь подсвечивалась
не будет только работать в IE < 10

<!DOCTYPE HTML>
<html>
<body>   
<style>
.main {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
  margin: 30px;
}

div  div {
  width: 70px;
  height: 70px;
  position: absolute;
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 0% 0%;
  -moz-transform: rotate(45deg);
  -moz-transform-origin: 0% 0%;
  -o-transform: rotate(45deg);
  -o-transform-origin: 0% 0%;
  -ms-transform: rotate(45deg);
  -ms-transform-origin: 0% 0%;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

.top { left: 50px; top: -50px; }
.right { left: 100px; top: 0; }
.bottom { left: 50px; top: 50px; }
.left { left: 0; top: 0; }

div div:hover {
  background-color: red;
  border: 71px solid white;
  z-index: 1;
}

.top:hover { top: -150px; }
.right:hover { top: -100px; left: 100px; }
.bottom:hover { top: -50px; }
.left:hover { top: -100px; }

</style>

<div class="main">
  <div class="top"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <div class="left"></div>
</div>
 
</body>
</html>

розовый слоник 23.01.2012 17:51
Цитата:
не будет только работать в IE < 10
всего то ничего))) это ведь мелочи)))

Pavel M. 23.01.2012 20:20
думаю можно это сделать и в IE, только зачем?
пример был просто ради изучения css


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