在鼠标悬停时使用自动位置显示大图像 [英] Display Large Image on mouse hover with auto position

问题描述

我在悬停时显示图像缩放效果有问题。问题是当我鼠标悬停时我的图像显示出网站边界因为它的大图像。如何在鼠标悬停时显示自动定位图像。它应该在里面网站边界。我有图像可以更好地理解。这是我的形象

CSS

。 Enlarge  {
  position  ：  relative;  
  height  ：  150px;  
  width  ：  250px;  
} 
。放大  span  {
  position  ： 绝对;  
  left  ：  -9999px;  
 可见性 < span class =code-keyword>：  hidden;  
  opacity  < span class =code-keyword>：  0;    -  webkit-transition  ：  opacity 0.5s ease;  
   -  moz-transition  ：  opacity 1s easy;  
  -ms-transition  ：  opacity 1s easy;  
   -  o-transition  ：  opacity 1s轻松;  
 过渡 ： 不透明度1s轻松;  
} 
 
  div 。放大：悬停 {
  z-index  ：  999;  
  cursor  ： 指针;  
} 
  div 。 Enlarge：hover  < span class =code-leadattribute> span  {
 可见性 ： < span class =code-keyword> visible;  
  opacity  ： < span class =code-keyword> 1;  
  top  ：  50px;  
  left  ：  0px;  
  width  ：  500px;  
  height  ：  300px;  
  padding  ：  5px;  
 背景 ： ＃9f499b;  
 
} 

< pre lang =HTML> < section class = 项目手册 >
< div class = 放大 >
< img < span class =code-attribute> src = images / portfoli / small.jpg / >
< span > < img src = images / portfoli / large.jpg / > < / span >
< / div >
< / section >
< section class = 项目手册 >
< div class = 放大 >
< img src = images / portfoli / small2.jpg / >
< span > < img < span class =code-attribute> src = images / portfoli / large2.jpg / > < / span >
< / div >
< / section >
< section class = 项目手册 >
< div class = 放大 >
< img src = images / portfoli / small3.jpg / >
< span > < img src = images / portfoli / large3.jpg / > < / span >
< / div >
< / section >
< < span class =code-leadattribute> section class = 项目手册 >
< div class = Enlarge >
< img src = images / portfoli / small4.jpg / >
< span > < img src = images / portfoli / large4。 jpg / > < / span >
< / div >
< / section >

 $（ document ） .ready（ function （）{
 $（'  #portfolio li'）。点击（ function （）{
  //  获取所点击项目的类 
  var  ourClass = $（ this ）。attr（'  class'）; 
 
  //  重置所有按钮上的活动课 
 $（' ＃filterOptions li'）。removeClass（'   active'）; 
  //  更新我们点击的按钮上的活动状态 
 $（ this ）。parent（）。addClass（'  active'）; 
 
  if （ourClass == ' 所有'）{
  //  显示我们所有的项目 
 $（' ＃portfolio'）。children（ '  section.item'）。show（ 1000 ）; 
} 
 其他 {
  //  隐藏所有不共享myClass的元素 
 $（' ＃组合'）。children（'  section：not（。' + ourClass + ' ）'）。hide（ 1000 ）; 
  //  显示所有共享ourClass的元素 
 $（' ＃portfolio'）。children（'  section。' + ourClass）.show（ 1000 ）; 
} 
 返回  false ; 
}）; 
}）; 

解决方案

（ document ）。ready （ function （）{

（' ＃portfolio li'）。click（ function （）{
// 获取所点击项目的类
var ourClass =

（ this ）。attr（' class'）;

// 重置活动类在所有按钮上

I have problem to displaying image zoom effect on hover.The problem is that when i mouse hover my image show out of website boundary because its large image.How i can show image on mouse hover with auto positioning.It should be inside the website boundary.I have image here to better understand.here is my image
CSS

.Enlarge {
position:relative;
height:150px;
width:250px;
}    
.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
   
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}    
div.Enlarge:hover span{
 visibility: visible;
 opacity: 1;
top: 50px;
left: 0px;
width:500px;
height:300px;
padding: 5px;
background:#9f499b;

}	

<section class="item brochure">
<div class="Enlarge">
    <img src="images/portfoli/small.jpg" />
    <span><img src="images/portfoli/large.jpg" /></span>
</div>
</section>
<section class="item brochure">
<div class="Enlarge">
    <img  src="images/portfoli/small2.jpg" />
    <span><img src="images/portfoli/large2.jpg" /></span>
</div>
</section>
<section class="item brochure">
<div class="Enlarge">
    <img  src="images/portfoli/small3.jpg"/>
    <span><img  src="images/portfoli/large3.jpg"/></span>
</div>
</section>
<section class="item brochure">
<div class="Enlarge">
    <img src="images/portfoli/small4.jpg"/>
    <span><img  src="images/portfoli/large4.jpg" /></span>
</div>
</section>

$(document).ready(function() {
	$('#portfolio li').click(function() {
		// fetch the class of the clicked item
		var ourClass = $(this).attr('class');
		
		// reset the active class on all the buttons
		$('#filterOptions li').removeClass('active');
		// update the active state on our clicked button
		$(this).parent().addClass('active');
		
		if(ourClass == 'all') {
			// show all our items
			$('#portfolio').children('section.item').show(1000);	
		}
		else {
			// hide all elements that don't share ourClass
			$('#portfolio').children('section:not(.' + ourClass + ')').hide(1000);
			// show all elements that do share ourClass
			$('#portfolio').children('section.' + ourClass).show(1000);
		}
		return false;
	});
});

解决方案

(document).ready(function() {

('#portfolio li').click(function() { // fetch the class of the clicked item var ourClass =

(this).attr('class'); // reset the active class on all the buttons

这篇关于在鼠标悬停时使用自动位置显示大图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！