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

文章来给大空介绍基于jquery的animate方法实现的一个图片上下左右翻滚效果代码,下面我来给大家发我早上整的jquery实现图片显示上下左右翻滚实例代码，各位朋友可进入参考。

我们先来看看核心代码

复制代码

$(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});
});
})

具体的实例演示代码

代码如

<style type="text/css">
body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff}
body,div,p,span,a,ul,li,b,form,input,h2,h3,img{margin:0;padding:0}
ul,li{list-style-type: none}
img{border:none;}

.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.php100.com/"  target="_blank" rel="nofollow"><img src="images/shu.jpg" /></a></div>
</div>

<div class="bottom">
<div><a href="http://www.hzhuti.com/" 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>