选项卡特效之左右切换

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

选项卡特效是网页中常见的特效之一，对于不少写代码的人员来说，遇到这种特效都是在网上找插件，一个插件通常都几k,而一个页面中多处特效时就用到多个插件，插件用的多了，一是加载页面变慢，二是还容易引起各插件间的冲突。其实选项卡特效我们完全可以自己用代码来进行实现。接下来就献上笔者写的源码，不到10行的jq代码就达到了预期效果，比用插件要方便多了。源码效果图如下:

源码如下：

<!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="/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 $w=$b_li.width();
$li.bind('mouseover',function(){
var xh=$(this).index();
$b_li.parent('.ce').stop().animate({"left":-xh*$w+"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:300%;height:100%;position:absolute;left:0;top:0;}
.tab_bd .ce li{float:left;}
.tab_bd .ce li img{width:512px;height:384px;cursor:pointer;}
.tab_hd{width:100%; padding-top:10px;height:30px;}
.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　

2014.06.11　更新

现在换了份工作，得整理下笔记。看了下之前发布的文章，有许多都没有进行完善，今天起就开始逐步完善下。点击上面的“运行代码”后可以在新页面中看到预期的效果，下面来对实现的方法进行一步步分析。

首先是布局方面，可以大致划分为三块。
最外面一层容器--"tab"；
然后是上面一块--"tab_hd"；
最后是下面的一块--"tab_bd";然后再来细分一下就可以了，案例不代表实际情况，总之具体情况具体分析；案例只是将效果给展示出来而已。

下面再来说下"jquery"是如何实现的。实现的大致思路如下：鼠标滑过上面的"tab_hd"时记录里面对应"li"的索引--var xh=$(this).index();然后下面的"tab_bd"也进行对应，位移就是用"序号"*"一个宽度""left":-xh*$w+"px"好了。源码已经给出，自己动动手练习练习就懂了，对jq不太懂的可以看手册，其实我也不太懂哈。

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

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

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