和大家分享一个最近我用到的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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知