最新【图片特效】jQuery实现图片上下左右翻滚

以下是三零网为大家整理的最新【图片特效】jQuery实现图片上下左右翻滚的文章，希望大家能够喜欢!

一款jQuery图片特效，实现图片的上下左右翻滚，将鼠标放在图片上的时候，图片会向左向右翻滚，或向上向下翻滚，两种方式代码内都涉及到了，希望大家在此基础上修改完善。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现图片显示上下左右翻滚</title>
<meta name="keywords" content="图片显示,上下左右翻滚" >
<style type="text/css">
body{margin:0 auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;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>
</head>
<body>
<div class="top">
<div><a href="#" target="_blank" rel="nofollow"><img src="/jscss/demoimg/201206/shu.jpg" /></div>
</div>
<div class="bottom">
<div><a href="#" target="_blank" rel="nofollow"><img src="/jscss/demoimg/201206/heng.jpg" /></div>
</div>
<div style="width:100%;height:600px;margin:0 auto"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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>
</body>
</html>

转载自La：：http://www.q3060.com/list3/list122/18903.html

ITPub博客

【转载】图片特效jQuery实现图片上下左右翻滚

最新文章