jquery实现图片显示上下左右翻滚
2012-06-01 19:21:21 来源：WEB开发网核心提示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmln
<!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>
- ››jquery .ajax方法 异步表单，接收服务器返回的数据...
- ››jquery 添加\删除 cookie
- ››jquery 正则表达式判断是否为正确邮箱格式
- ››jQuery EasyUI 数字框(NumberBox)用法
- ››JQuery中对option的添加、删除、取值
- ››实现dedeCMS二级导航的简单方法
- ››实现discuz投票选项文字添加链接进入查看详情
- ››JQuery实现下拉,单选,复选三大控件方法,
- ››实现android socket 聊天与调试
- ››jquery实现判断输入文字个数的代码
- ››实现windows7系统3D切换页面的方法
- ››实现Windows7系统局域网发现共享
中查找“jquery实现图片显示上下左右翻滚”更多相关内容
中查找“jquery实现图片显示上下左右翻滚”更多相关内容更多精彩
赞助商链接
