Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.09.2015, 12:41
Новичок на форуме
Отправить личное сообщение для Dash Посмотреть профиль Найти все сообщения от Dash
 
Регистрация: 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');
		});
	});


Надеюсь все доходчиво объяснил
Может быть у кого есть идеи, как сделать появляющуюся картинку более стабильной?
Ответить с цитированием
  #2 (permalink)  
Старый 28.09.2015, 13:19
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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>
Ответить с цитированием
  #3 (permalink)  
Старый 28.09.2015, 13:50
Новичок на форуме
Отправить личное сообщение для Dash Посмотреть профиль Найти все сообщения от Dash
 
Регистрация: 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>
Ответить с цитированием
  #4 (permalink)  
Старый 28.09.2015, 14:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 28.09.2015, 14:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.09.2015, 15:40
Новичок на форуме
Отправить личное сообщение для Dash Посмотреть профиль Найти все сообщения от Dash
 
Регистрация: 28.09.2015
Сообщений: 5

ksa, на основе Вашего кода удалось, наконец, создать нужный эффект. Благодарность Заменил события mouseenter на mouseover, а mouseleave на mouseout, + пригодилось кое-что из CSS.

Осталось поколдовать немного, чтобы лупа также была ссылкой (сейчас cursorointer).

рони, Ваш вариант почти то, но все же отдал предпочтение варианту с плагином

<!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.
Ответить с цитированием
  #7 (permalink)  
Старый 28.09.2015, 15:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #8 (permalink)  
Старый 28.09.2015, 16:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Dash
Осталось поколдовать немного, чтобы лупа также была ссылкой
Так можно ссылку и использовать...
Лупу фоновой картинкой.
Ответить с цитированием
  #9 (permalink)  
Старый 29.09.2015, 19:54
Новичок на форуме
Отправить личное сообщение для Dash Посмотреть профиль Найти все сообщения от Dash
 
Регистрация: 28.09.2015
Сообщений: 5

ksa, да, все под ссылку засунул, так сработало.

рони, интересное решение. В сравнении jquery эффект оказался стабильнее + плюшка работы в старых ослах. Остановлюсь на этом
Ответить с цитированием
  #10 (permalink)  
Старый 08.08.2017, 21:27
Новичок на форуме
Отправить личное сообщение для Агата Лёд Посмотреть профиль Найти все сообщения от Агата Лёд
 
Регистрация: 08.08.2017
Сообщений: 1

Поздно, но вдруг кому-то пригодится:
Цитата:
если курсор попадает на эту лупу, то она начинает мерцать (то есть мы, как бы, покидаем пределы картинки, к которой этот hover привязан).
Потом jQuery, но и тут возникает "баг", если курсор попадает на лупу.

Нужно для элемента лупы поставить стилевое свойство:

pointer-events:none;

Таким образом, он как-бы станет невидимым для мыши.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу слайдер с запуском при наведении на картинку Hol1killer jQuery 1 28.09.2015 14:01
Не получается при наведении на картинку сменить другую. Iktash Элементы интерфейса 2 04.07.2012 17:14
Менять цвет фона select option при наведении Dmitriykh Элементы интерфейса 3 25.07.2011 13:04
Картинка не изменяется при наведении. astashovaj Общие вопросы Javascript 11 12.01.2011 10:44
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48