«

jquery实现图片放大缩小特效

时间:2024-1-30 09:23     作者:韩俊     分类: Html+Css


和大家分享一个最近用到的jquery实现图片的放大缩小的特效。具体效果是鼠标移动到图片上,图片自动缩到左上角,右下角出现文字说明,鼠标移走后图片恢复,文字被图片遮挡。非常不错的一个图片特效功能。贴一下效果图:

jquery实现图片放大缩小特效

jquery实现图片放大缩小特效的预览地址: http://www.maopiaopiao.com/web_tools/private/example/jquery实现图片放大缩小特效.html

jquery实现图片放大缩小特效的具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现图片放大缩小功能</title>
<style type="text/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;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(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);
         });
});
</script>
</head>
<body>
<div style="width:960px; height:auto; margin:0 auto; padding:10px 0px;"></div>
<div class="galleryContainer">
  <div class="galleryImage">
      <img width="325" height="260" src="images/image01.jpg" />
      <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>
  <div class="galleryImage">
      <img width="325" height="260" src="images/image02.jpg" />
      <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>
  <div class="galleryImage">
      <img width="325" height="260" src="images/image03.jpg" />
      <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>
</div>
</body>
</html>

标签: javascript html css

热门推荐