jquery实现鼠标滑过图片翻转效果
来源：原创
时间：2015-08-26
作者：脚本小站
分类：JS/JQuery
下面这段代码实现鼠标滑过图片图片翻转，jquery地址要换成自己的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="./jquery-1.7.2.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0;}
.list{
width:550px;
height:92px;
margin:0;
border:1px solid #ddd;
overflow:hidden;
}
.list li{
float:left;
width:180px;
height:92px;
overflow:hidden;
list-style:none;
display:inline;
position:relative;
}
.list li img{
float:left;
width:180px;
height:92px;
border:none;
}
.list li a{
position:absolute;
left:0; top:0;
width:180px;
height:0; background:#999;
display:inline;
text-align:center;
line-height:92px;
overflow:hidden;
color:#fff;
text-decoration:none;
}
#mar{
margin:0px 5px;
}
</style>
<title></title>
</head>
<body>
<ul>
<li><img src="chole.jpg" alt="" /><a href="#"><span>1</span></a></li>
<li id="mar"><img src="chole.jpg" alt="" /><a href="#"><span>2</span></a></li>
<li><img src="chole.jpg" alt="" /><a href="#"><span>3</span></a></li>
</ul>
<script>
$(function () {
$('.list li').hover(function (){
$(this).children('a,img').stop();
$(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {
$(this).siblings('a').stop().animate({ 'height': 92, 'marginTop': 0 }, 200);
});
}, function (){
$(this).children('a,img').stop();
$(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
$(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 92 }, 200);
});
});
});
</script>
</body>
</html>