1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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

和大家分享一个最近我用到的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/post/8142.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: