jquery实现图片显示上下左右翻滚

最新推荐文章于 2013-10-20 09:58:44 发布

dgd896re32534

最新推荐文章于 2013-10-20 09:58:44 发布

阅读量91

点赞数

文章标签： javascript 前端 xhtml ViewUI

原文链接：http://www.cnblogs.com/divcss/archive/2012/06/01/2530626.html

版权

<!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 src="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 src="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 src="images/shu.jpg" /></a></div>
</div>

<div class="bottom">
    <div><a href="http://lifesky.taobao.com/" target="_blank" rel="nofollow"><img src="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 src="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 src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>



<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>
</body>
</html>

这两天要么不是折腾shopex,要么弄discuz,咱的jquery博客有点忽视了。
白天公司的事情，晚上家里事情也多。
惆怅，时间不够用。
公司的需求像苍蝇似的，一会飞一个，鸡毛蒜皮多如毛。
最近弄商城个人中心相册，看了不少东西，还是老外的做的好。
今天分享一个早上整的jquery实现图片显示上下左右翻滚。
大体思路是这样的，鼠标移动到图片上图片上去，显示另外一个，实现上下左右显隐效果。
其实是一张图片利用animate

转载于:https://www.cnblogs.com/divcss/archive/2012/06/01/2530626.html

dgd896re32534

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>...
复制链接

扫一扫