jquery实现鼠标移入移出图片放大缩小的效果

时间：6年前阅读：6664

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	body{
		margin: 50px auto;
	}
	
.dd{
	width: 1100px;
	}
.tt{
	background-color:darkgrey;
	width:325px;
	height:260px;
	overflow:hidden;
	margin:5px;
	float:left;
	}
.cc{
	margin-left:10px;
	font-family:arial;
	padding:3px;
	}
.cc h2{
	color: darkcyan;
	}
.cc p{
	color: darkmagenta;
	}
.clear{
	clear:both;
	margin-top:10px;
	}
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.tt').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 class="dd">
  <div class="tt">
      <img width="325" height="260" src="https://www.qiquanji.com/data/img/dmj/201907251564026339179503.jpg" />
      <div class="cc">  
          <h2>01</h2>
          <p>
              第一张图
          </p>
      </div>
    </div>
  <div class="tt">
      <img width="325" height="260" src="https://www.qiquanji.com/data/img/dmj/201907251564026339258015.jpg" />
      <div class="cc">  
          <h2>02</h2>
          <p>
              第二张图
          </p>
      </div>
  </div>
  <div class="tt">
      <img width="325" height="260" src="https://www.qiquanji.com/data/img/dmj/201907251564026339573702.jpg" />
      <div class="cc">  
          <h2>03</h2>
          <p>
              第三张图
          </p>
      </div>
  </div>
</div>
</body>
</html>

效果：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery实现鼠标移入移出图片放大缩小的效果

网友评论