选项卡特效之上下切换

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-11 11:23:38　-　阅:　-　评:0　-　积分:0

选项卡特效有好多种，昨天分享了《选项卡特效之左右切换》，那么今天就来分享下垂直方向上的上下切换效果。还是直接进入主题吧，源码效果图如下:

下面附源码:

<!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>选项卡特效之上下切换--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="选项卡特效,上下切换,左右切换,淡入淡出,jq特效">
<meta name="description" content="选项卡特效,上下切换,左右切换,淡入淡出,jq特效">
<script type="text/javascript"  src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var $li=$('.tab_hd li');
var $b_li=$('.tab_bd .ce li');
var $h=$b_li.height();
$li.bind('mouseover',function(){
var xh=$(this).index();
$b_li.parent().stop().animate({"top":-xh*$h+"px"},500);
$(this).addClass('hover').siblings().removeClass('hover');
});
});
</script>
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;}
img{border:0}
.clear{clear:both; font-size:0;height:0;line-height:0; overflow:hidden;}
.tab{width:512px;margin:0 auto;text-align:center;overflow:hidden;}
.tab_bd{width:100%;height:384px;overflow:hidden;position:relative;}
.tab_bd .ce{width:100%;height:300%;position:absolute;left:0;top:0;}
.tab_bd .ce li img{width:512px;height:384px;cursor:pointer; vertical-align:top}
.tab_hd{width:100%;height:30px;padding-top:10px}
.tab_hd li{width:130px; height:30px;line-height:30px;border-radius:5px 5px 0 0;background:#ccc; margin-right:10px;float:left;_display:inline;cursor:pointer;}
.tab_hd .hover{background:#666;color:#fff;}
</style>
</head>
<body>
<div class="tab">
<ul class="tab_hd">
<li>第一张</li>
<li>第二张</li>
<li>第三张</li>
</ul>
<div class="tab_bd">
<ul class="ce">
<li><img src="/d/file/css3/2013-10-10/三只小鼠.jpg" /></li>
<li><img src="/d/file/css3/2013-10-10/老二占领右食槽.jpg" /></li>
<li><img src="/d/file/css3/2013-10-10/可怜的老三.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>

点此下载→→【代码】选项卡特效之上下切换.zip　　　

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2013-10-11/85.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！