08.03.2013, 14:10
|
|
Новичок на форуме
|
|
Регистрация: 14.01.2012
Сообщений: 9
|
|
|
Как это делается?
Подскажите пожалуйста каким скриптом и какой библиотекой реализуется данный эфект?
http://pizza2dom.ru/pizza
При наведении на карточку товара рисуются линии бордера. |
|
09.03.2013, 00:18
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
mishanay,
В данном случае, div, установленный с positon:absolute за картинкой и увеличивающийся в размере при наведении,
div(ов) два на одну карточку, - установленны по диагонали,
окрас бордеров у этих div только c двух прилегающих сторон
Оба div в общем обрамлении - третьим
Последний раз редактировалось Deff, 09.03.2013 в 00:20.
|
|
09.03.2013, 11:31
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
Что-то не пойму почему происходит смена событий при движении мыши "по" диву box... 
<!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>
|
|
09.03.2013, 20:22
|
|
Новичок на форуме
|
|
Регистрация: 14.01.2012
Сообщений: 9
|
|
|
Я могу только предположить что анимация зацикливается и ее надо остановить после первого воспроизведения
|
|
10.03.2013, 11:01
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Сообщение от 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>
|
|
10.03.2013, 13:43
|
|
Новичок на форуме
|
|
Регистрация: 14.01.2012
Сообщений: 9
|
|
|
Да это действительно странно! Где уважаемые знатоки? Помогите разобраться!
|
|
10.03.2013, 16:55
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
Сообщение от mishanay
|
|
Да это действительно странно! Где уважаемые знатоки? Помогите разобраться!
|
что здесь странного? это стандартное поведение out и over при преходе на дочерний срабатывает событие out родителя и т.д
используйте события leave и enter http://jquery-docs.ru/events/mouseleave/ |
|
10.03.2013, 18:36
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
<!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>
Последний раз редактировалось Deff, 10.03.2013 в 19:11.
|
|
10.03.2013, 18:54
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,205
|
|
|
Сообщение от dmitriymar
|
|
это стандартное поведение out и over при преходе на дочерний срабатывает событие out родителя и т.д
|
Но :hover таким не страдает...
Причем "моргание" происходит даже если не двигать по картинке, а например в правой стороне ДИВа... |
|
10.03.2013, 18:59
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от ksa
|
|
Причем "моргание" происходит даже если не двигать по картинке, а например в правой стороне ДИВа...
|
ksa,
Во фрейме, события over для javascrip прерываются еще и таймированием, к примеру с родительской, нун не в топике тестить |
|
|
|
