Javascript-форум - Как это делается?

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как это делается? (https://javascript.ru/forum/dom-window/36236-kak-ehto-delaetsya.html)

mishanay

08.03.2013 14:10

Как это делается?

Подскажите пожалуйста каким скриптом и какой библиотекой реализуется данный эфект?

http://pizza2dom.ru/pizza

При наведении на карточку товара рисуются линии бордера.

Deff	09.03.2013 00:18

mishanay,
В данном случае, div, установленный с positon:absolute за картинкой и увеличивающийся в размере при наведении,
div(ов) два на одну карточку, - установленны по диагонали,
окрас бордеров у этих div только c двух прилегающих сторон
Оба div в общем обрамлении - третьим

ksa	09.03.2013 11:31

Что-то не пойму почему происходит смена событий при движении мыши "по" диву box... :blink:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.box {
	position: relative;
	background-color: #ffffff;
}
.border {
	position: absolute;
	width: 0;
	height: 0;
}
.up {
	top: 0;
	right: 0;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
}
.dn {
	left: 0;
	bottom: 0;
	border-left: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.box').mouseover(function (){
		var o=$('.border');
		o.css({
			borderColor: 'green',
		});
		o.animate({
			width: '50%',
			height: '50%'
		});
	});
	$('.box').mouseout(function (){
		var o=$('.border');
		o.animate({
			width: 0,
			height: 0
		});
		o.css({
			borderColor: '#ffffff',
		});
	});
});
</script>
</head>
<body>
<div class='box'>
	<div class='border up'></div>
	<div class='border dn'></div>
	<img src='http://pizza2dom.ru/image/cache/data/pizza/margarita-250x250.jpg' />
</div>
</body>
</html>

mishanay

09.03.2013 20:22

Я могу только предположить что анимация зацикливается и ее надо остановить после первого воспроизведения

ksa	10.03.2013 11:01

Цитата:

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

анимация зацикливается

Нет.
Почему-то события mouseout и mouseover mouseout срабатывают при движении по ДИВу...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.box {
	position: relative;
	background-color: #ffffff;
}
.border {
	position: absolute;
	width: 0;
	height: 0;
}
.up {
	top: 0;
	right: 0;
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
}
.dn {
	left: 0;
	bottom: 0;
	border-left: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.box').mouseover(function (){
		alert(1);
		var o=$('.border');
		o.css({
			borderColor: 'green',
		});
		o.animate({
			width: '50%',
			height: '50%'
		});
	});
	$('.box').mouseout(function (){
		alert(2);
		var o=$('.border');
		o.animate({
			width: 0,
			height: 0
		});
		o.css({
			borderColor: '#ffffff',
		});
	});
});
</script>
</head>
<body>
<div class='box'>
	<div class='border up'></div>
	<div class='border dn'></div>
	<img src='http://pizza2dom.ru/image/cache/data/pizza/margarita-250x250.jpg' />
</div>
</body>
</html>

mishanay

10.03.2013 13:43

Да это действительно странно! Где уважаемые знатоки? Помогите разобраться!

dmitriymar

10.03.2013 16:55

Цитата:

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

Да это действительно странно! Где уважаемые знатоки? Помогите разобраться!

что здесь странного? это стандартное поведение out и over при преходе на дочерний срабатывает событие out родителя и т.д
используйте события leave и enter http://jquery-docs.ru/events/mouseleave/

Deff	10.03.2013 18:36

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.box {
	position: relative;
	background-color: #ffffff;
}
.border {
	position: absolute;
	width: 0;
	height: 0;
}
.up {
	top: 0;
	right: 0;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}
.dn {
	left: 0;
	bottom: 0;
	border-left: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.box').mouseover(function (){
		var o=$('.border');
		o.css({
			borderColor: 'green',
		});
		o.stop().animate({
			width: '50%',
			height: '50%'
		},600);
	});
	$('.box').mouseout(function (){
		var o=$('.border');
		o.stop().animate({
			width: 0,
			height: 0
		},400, "linear", function (){
		o.css({
			borderColor: '#fff',
		});
});

	});
});
</script>
</head>
<body>
<div class='box'>
	<div class='border up'></div>
	<div class='border dn'></div>
	<img src='http://pizza2dom.ru/image/cache/data/pizza/margarita-250x250.jpg' />
</div>
</body>
</html>

ksa	10.03.2013 18:54

Цитата:

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

это стандартное поведение out и over при преходе на дочерний срабатывает событие out родителя и т.д

Но :hover таким не страдает...

Причем "моргание" происходит даже если не двигать по картинке, а например в правой стороне ДИВа...

Deff	10.03.2013 18:59

Цитата:

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

Причем "моргание" происходит даже если не двигать по картинке, а например в правой стороне ДИВа...

ksa,
Во фрейме, события over для javascrip прерываются еще и таймированием, к примеру с родительской, нун не в топике тестить

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

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице