jquery实现图片上下左右翻滚效果代码

.top{width:500px;margin:20px auto}
 .top div{width:122px;height:56px;float:left;margin-left:5px;display:inline;border:1px #ccc solid;position:relative;overflow:hidden}
  .top div img{position:absolute}
.bottom{width:500px;margin:20px auto}  
 .bottom div{width:122px;height:56px;float:left;margin-left:5px;display:inline;border:1px #ccc solid;position:relative;overflow:hidden}
  .bottom div img{position:absolute} 
</style>

<div class="top">
 <div><a href="http://www.111cn.net/"  target="_blank" rel="nofollow"><img src="images/shu.jpg" /></a></div>
</div>

<div class="bottom">
 <div><a href="http://www.111cn.net/" target="_blank" rel="nofollow"><img src="images/heng.jpg" /></a></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".top div a").hover(function(){
  $("img",this).stop().animate({top:"-56px"},{queue:false,duration:200});
 },function(){
  $("img",this).stop().animate({top:"0px"},{queue:false,duration:200});
 });
 
 $(".bottom div a").hover(function(){
  $("img",this).stop().animate({left:"-122px"},{queue:false,duration:200});
 },function(){
  $("img",this).stop().animate({left:"0px"},{queue:false,duration:200});
 });
})
</script>