jquery实现简单的图片翻转效果_jq 点击图片翻转变成另外一张图片效果-优快云博客

本文链接：https://blog.youkuaiyun.com/sunflower_li/article/details/62423393

鼠标经过图片图片翻转显示图片背后的文字（对于其中引用的jquery文件、图片，需要用自己的）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{margin: 0;padding: 0;}
div{width: 284px;height: 430px;margin: 30px auto;border: 1px solid #ccc;}
p{width: 284px;height:50px;line-height:50px;text-align: center;font-size: 20px;}
ul{width: 284px;height: 366px;}
ul li{float: left;list-style: none;width: 120px;height: 72px;margin:10px;border: 1px solid #ccc;position: relative;}
ul li img{width: 120px;height: 72px;position: absolute;z-index: 2;}
ul span{display: block;width: 120px;height:0;overflow:hidden;line-height:72px;background: orange;
position: absolute;top:35px;text-align: center;font-size: 30px;}
</style>
<script src="libs/jquery-1.11.3.js"></script>
<script>
$(function(){
$('ul li').hover(function () {
var $img = $(this).children('img');
$img.stop().animate({
height : 0,
top : '35px'
},500,function(){
$img.hide();
$img.next('span').show().animate({
height : '72px',
top : 0
},500)
})
}, function () {
var $span = $(this).children('span');
$span.stop().animate({
height : 0,
top : '35px'
},500,function(){
$span.hide();
$span.prev('img').show().animate({
height : '72px',
top : 0
},500)
})
})
})
</script>
</head>
<body>
<div>
<p>翻转</p><hr>
<ul>
<li><img src="img/1.jpg"><span>美即</span></li>
<li><img src="img/2.jpg"><span>美即</span></li>
<li><img src="img/3.jpg"><span>美即</span></li>
<li><img src="img/4.jpg"><span>美即</span></li>
<li><img src="img/5.jpg"><span>美即</span></li>
<li><img src="img/6.jpg"><span>美即</span></li>
<li><img src="img/7.jpg"><span>美即</span></li>
<li><img src="img/8.jpg"><span>美即</span></li>
</ul>
</div>
</body>
</html>