28.09.2015, 12:41
|
|
Новичок на форуме
|
|
Регистрация: 28.09.2015
Сообщений: 5
|
|
|
Появление лупы при наведении на картинку
Добрый день! Была идея создать галлерею, при наведении на картинку превью появляется лупа над этой же картинкой, когда мышка уходит, она исчезает.
Сначала реализовал на css свойством hover и z-index, но если курсор попадает на эту лупу, то она начинает мерцать (то есть мы, как бы, покидаем пределы картинки, к которой этот hover привязан).
Потом jQuery, но и тут возникает "баг", если курсор попадает на лупу.
Сама лупа сделана абсолют, и появляется в уголке картинки при наведении.
$(function() {
$('div a').mouseenter(function() {
$('img.magnifier').fadeIn('100');
});
$('div a').mouseleave(function() {
$('img.magnifier').fadeOut('100');
});
});
Надеюсь все доходчиво объяснил 
Может быть у кого есть идеи, как сделать появляющуюся картинку более стабильной? |
|
28.09.2015, 13:19
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,229
|
|
|
Сообщение от Dash
|
|
как сделать появляющуюся картинку более стабильной?
|
Дык!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
span {
position: relative;
display: inline-block;
}
.test {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
span:hover > .test {
visibility: visible;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<span>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img class='test' src='http://javascript.ru/forum/images/smilies/wink.gif' />
</span>
</body>
</html>
|
|
28.09.2015, 13:50
|
|
Новичок на форуме
|
|
Регистрация: 28.09.2015
Сообщений: 5
|
|
Здорово! Правда, после плавной анимации, не охота возвращаться к css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's do the magnifier</title>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script type="text/javascript">
$(function() {
$('div a').mouseenter(function() {
$('img.magnifier').fadeIn('100');
});
$('div a').mouseleave(function() {
$('img.magnifier').fadeOut('100');
});
});
</script>
<style>
img.prev {
padding: 4px; border:1px solid grey; box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
img.prev:hover {
box-shadow: 0 0 10px rgba(143, 144, 74, 0.5);
}
img.magnifier {
padding:0;margin:0;border:none;position:absolute; bottom: 24px; right: 10px; z-index:99; display:none;
}
div a {
position:absolute;top:0;left:0;display:inline-block;
}
</style>
</head>
<body>
<div style="position:relative;width:170px; height:130px;">
<img class="magnifier" alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/magnifier_.png" width="40" height="40" /><a href="http://files.boysgame.su/games/openok_zimnij-1.jpg" data-lightbox="gallery"><img alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/openok_zimnij-1.jpg" class="prev" width="160" height="106" /></a>
</div>
</body>
</html>
|
|
28.09.2015, 14:10
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Dash,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's do the magnifier</title>
<style>
img {
padding: 4px; border:1px solid grey; box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
img:hover {
box-shadow: 0 0 10px rgba(143, 144, 74, 0.5);
}
div:hover:after { content: '';
width: 40px; height:40px;
background-image: url(http://files.boysgame.su/games/magnifier_.png);
background-size: cover;
position:absolute;bottom: 24px; right: 10px; display:block;
}
</style>
</head>
<body>
<div style="position:relative;width:170px; height:130px;">
<a href="http://files.boysgame.su/games/openok_zimnij-1.jpg" data-lightbox="gallery">
<img alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/openok_zimnij-1.jpg" class="prev" width="160" height="106" />
</a>
</div>
</body>
</html>
|
|
28.09.2015, 14:22
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,229
|
|
|
Сообщение от Dash
|
|
после плавной анимации
|
ЦСС тут вовсе ни при чем... 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.foto {
position: relative;
display: inline-block;
}
.test {
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
<script type='text/javascript'>
$(function(){
$('.foto')
.mouseover(function(){
$(this).children('.test').stop().fadeIn();
})
.mouseout(function(){
$(this).children('.test').stop().fadeOut();
});
});
</script>
</head>
<body>
<span class='foto'>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<img class='test' src='http://javascript.ru/forum/images/smilies/wink.gif' />
</span>
</body>
</html>
|
|
28.09.2015, 15:40
|
|
Новичок на форуме
|
|
Регистрация: 28.09.2015
Сообщений: 5
|
|
ksa, на основе Вашего кода удалось, наконец, создать нужный эффект. Благодарность  Заменил события mouseenter на mouseover, а mouseleave на mouseout, + пригодилось кое-что из CSS.
Осталось поколдовать немного, чтобы лупа также была ссылкой (сейчас cursor  ointer).
рони, Ваш вариант почти то, но все же отдал предпочтение варианту с плагином
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's do the magnifier</title>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script type="text/javascript">
$(function() {
$('div.thumbnail').mouseover(function() {
$('img.magnifier').stop().fadeIn('100');
})
.mouseout(function() {
$('img.magnifier').stop().fadeOut('100');
});
});
</script>
<style>
img.prev {
padding: 4px;border:1px solid grey;box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div.thumbnail:hover img.prev {
box-shadow: 0 0 10px rgba(143, 144, 74, 0.5);
}
img.magnifier {
padding:0;margin:0;border:none;position:absolute;bottom: 12px;right: 10px;z-index:99;display:none;cursor:pointer;
}
</style>
</head>
<body>
<div class="thumbnail" style="position:relative;display:inline-block;">
<img class="magnifier" alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/magnifier_.png" width="40" height="40" />
<a href="http://files.boysgame.su/games/openok_zimnij-1.jpg" data-lightbox="gallery"><img alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/openok_zimnij-1.jpg" class="prev" width="160" height="106" /></a>
</div>
</body>
</html>
Последний раз редактировалось Dash, 28.09.2015 в 15:46.
|
|
28.09.2015, 15:57
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Dash,
зачема плагин?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Let's do the magnifier</title>
<style>
img.prev {
padding: 4px;border:1px solid grey;box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div.thumbnail:hover img.prev {
box-shadow: 0 0 10px rgba(143, 144, 74, 0.5);
}
img.magnifier {
padding:0;margin:0;border:none;position:absolute;bottom: 12px;right: 10px;z-index:99;transition: all .6s ease-in-out;
opacity: 0;cursor:pointer;
}
div.thumbnail:hover img.magnifier{
opacity: 1;
}
</style>
</head>
<body>
<div class="thumbnail" style="position:relative;display:inline-block;">
<img class="magnifier" alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/magnifier_.png" width="40" height="40" />
<a href="http://files.boysgame.su/games/openok_zimnij-1.jpg" data-lightbox="gallery"><img alt="Опёнок зимний фото" title="" src="http://files.boysgame.su/games/openok_zimnij-1.jpg" class="prev" width="160" height="106" /></a>
</div>
</body>
</html>
|
|
28.09.2015, 16:03
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,229
|
|
|
Сообщение от Dash
|
|
Осталось поколдовать немного, чтобы лупа также была ссылкой
|
Так можно ссылку и использовать... 
Лупу фоновой картинкой. |
|
29.09.2015, 19:54
|
|
Новичок на форуме
|
|
Регистрация: 28.09.2015
Сообщений: 5
|
|
ksa, да, все под ссылку засунул, так сработало.
рони, интересное решение. В сравнении jquery эффект оказался стабильнее + плюшка работы в старых ослах. Остановлюсь на этом 
|
|
08.08.2017, 21:27
|
|
Новичок на форуме
|
|
Регистрация: 08.08.2017
Сообщений: 1
|
|
|
Поздно, но вдруг кому-то пригодится:
|
Цитата:
|
если курсор попадает на эту лупу, то она начинает мерцать (то есть мы, как бы, покидаем пределы картинки, к которой этот hover привязан).
Потом jQuery, но и тут возникает "баг", если курсор попадает на лупу.
|
Нужно для элемента лупы поставить стилевое свойство:
pointer-events:none;
Таким образом, он как-бы станет невидимым для мыши. |
|
|
|
