jq实现酷炫的鼠标经过图片翻滚效果

点评：一个酷炫的图片翻滚效果要实现这个效果并不难，只要思路对了，一切都好办，下面有个不错的示例，大家可以参考下！

短短的十多行代码就实现了一个酷炫的图片翻滚代码，要实现这个效果并不难，只要思路对了，一切都好办，不多说了，直接上代码看效果！ 

html结构： 

复制代码 代码如下:

<ul class="list"> 

<li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li> 

<li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li> 

<li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li> 

<li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li> 

<li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li> 

<li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li> 

<li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li> 

<li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li> 

</ul> 

css代码： 

复制代码 代码如下:

*{ margin:0; padding:0;} 

.list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;} 

.list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;} 

.list li img{ float:left; width:150px; height:80px; border:none;} 

.list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;} 

jq代码（注意要引入jq库）： 

复制代码 代码如下:

$(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': 80, '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': 80 }, 200); 

}); 

}); 

}); 

是不是很简单的几句jq代码？亲，不妨copy下来看下效果呗！