jQuery悬停图片变焦效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery悬停图片变焦效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<title>jQuery Zoom-Info</title>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/zoominfo.js"></script>
</head>
<body>
<div class="galleryContainer">

<!--galleryEntry-->    
  <div class="galleryImage">
      <img src="images/image01.jpg"></img>
      <div class="info">  
          <h2>Taylor Swift</h2>
          <p>
              Taylor Alison Swift (born December 13, 1989) is an American country pop singer-songwriter and actress.
          </p>
      </div>
    </div>
<!--end galleryEntry-->  
      
  
<!--galleryEntry-->    
  <div class="galleryImage">
      <img src="images/image02.jpg"></img>
      <div class="info">  
          <h2>Rihanna</h2>
          <p>
              Rihanna (born February 20, 1988) is a Barbadian R&B recording artist and model born in Saint Michael, Barbados.
          </p>
      </div>
      </div>
<!--end galleryEntry-->


<!--galleryEntry-->    
  <div class="galleryImage">
      <img src="images/image03.jpg"></img>
      <div class="info">  
          <h2>Black Eyed Peas</h2>
          <p>
              The Black Eyed Peas is a Grammy Award winning hip hop group that formed in Los Angeles, California in 1995.
          </p>
      </div>
      </div>
<!--end galleryEntry-->

<!--galleryEntry-->    
  <div class="galleryImage">
      <img src="images/image04.jpg"></img>
      <div class="info">  
          <h2>Lady Antebellum</h2>
          <p>
              Lady Antebellum is an American country music group formed in Nashville, Tennessee in 2006. 
          </p>
      </div>
      </div>
<!--end galleryEntry-->

<!--galleryEntry-->    
  <div class="galleryImage">
      <img src="images/image05.jpg"></img>
      <div class="info">  
          <h2>Lady Gaga</h2>
          <p>
              Lady Gaga is an American recording artist who rose to fame with her first two singles "Just Dance" and "Poker Face".
          </p>
      </div>
      </div>
<!--end galleryEntry-->
      
    
<!--galleryEntry-->    
  <div class="galleryImage">
      <img src="images/image06.jpg"></img>
      <div class="info">  
          <h2>The Killers</h2>
          <p>
              The Killers is an American rock band from Las Vegas, Nevada, formed in 2002 who have sold over 16 million records worldwide.
          </p>
      </div>
      </div>
<!--end galleryEntry-->
      	
      
  </div>
  <p class="clear">
 <a href="#">
  Back to Name
 </a>
 </p>
  </body>
</html>

JS代码(zoominfo.js):

$(document).ready(function(){
	$('.galleryImage').hover(function(){
	$(this).find('img').animate({
	width:100,marginTop:10,marginLeft:10}
,500);
}
,function(){
	$(this).find('img').animate({
	width:325,marginTop:0,marginLeft:0}
,300);
}
);
}
);

CSS代码(style.css):

.galleryContainer{width:1024px;}
.galleryImage{background-color:black;width:325px;height:260px;overflow:hidden;margin:5px;float:left;}
.info{margin-left:10px;font-family:arial;padding:3px;}
.info h2{color:gray;}
.info p{color:white}
.clear{clear:both;margin-top:10px;}

附件:下载该文件资源,减少时间成本(增值服务)