- <!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="图片显示,上下左右翻滚" >
- <meta name="description" content="jQuery吧,Write Less, Do More,注重前端开发,web前端开发">
- <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 style="margin:0 auto;text-align:center"><script type="text/javascript">/*DEMO728*90,创建于2012-5-15*/ var cpro_id = 'u897038';</script><script src1="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></div>
- <div style="margin:0 auto;text-align:center"><script type="text/javascript">/*468*60,创建于2012-5-7*/ var cpro_id = 'u883919';</script><script src1="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script></div>
- <h1><a href="http://www.jqueryba.com/" target="_blank" title="jquery,jquery博客,jquery效果,前端开发,web前端,web前端开发,设计,前端资源,html+CSS,JavaScript,html5,css3,浏览器兼容,php">jQuery吧</a></h1>
- <h2><a href="http://www.jqueryba.com/399.html" target="_blank">jquery实现图片显示上下左右翻滚</a></h2>
- <div class="top">
- <div><a href="http://lifesky.taobao.com/" target="_blank" rel="nofollow"><img src1="images/shu.jpg" /></a></div>
- </div>
- <div class="bottom">
- <div><a href="http://lifesky.taobao.com/" target="_blank" rel="nofollow"><img src1="images/heng.jpg" /></a></div>
- </div>
- <div style="width:100%;height:600px;margin:0 auto"></div>
- <script type="text/javascript">/*DEOM120*270,创建于2012-5-12*/ var cpro_id = 'u893319';</script><script src1="http://cpro.baidu.com/cpro/ui/f.js" type="text/javascript"></script> <script type="text/javascript">/*DEMO728*15,创建于2012-5-15*/ var cpro_id = 'u897027';</script><script src1="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>
- <script type="text/javascript" src1="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>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/140620134037.html
来源: http://www.codesnippet.cn/detail/140620134037.html