选项卡特效之淡入淡出

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-10-14 09:30:33　-　阅:　-　评:0　-　积分:0

昨天周日，休息一天，然后家里也无网，悲剧了，唉。。。今天继续来分享下《选项卡特效之淡入淡出》，方法也很简单。利用fadeIn来进行实现，还是直接来看源码吧。放张效果图：

源码如下：

<!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特效,鼠标特效,fadeIn">
<meta name="description" content="选项卡特效,淡入淡出,jq特效,鼠标特效,fadeIn">
<script type="text/javascript"  src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
　$(function(){
　　var $li=$('.tab_hd li');
　　var $b_li=$('.tab_bd .ce li');
　　$li.bind('mouseover',function(){
　　  var xh=$(this).index();
　　  $b_li.eq(xh).stop().fadeIn().siblings().stop().hide();
　  　$(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:100%;position:absolute;left:0;top:0;}
.tab_bd .ce li img{width:512px;height:384px;cursor:pointer;}
.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 style="display:none"><img src="/d/file/css3/2013-10-10/老二占领右食槽.jpg" /></li>
<li style="display:none"><img src="/d/file/css3/2013-10-10/可怜的老三.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>

点此下载→→【代码】选项卡特效之淡入淡出.zip　　

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

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

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