选项卡特效之淡入淡出2

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

前一段时间在装修京东店铺，当然要做banner图轮播特效了。由于初次接触京东店铺，对里面的规则之类的也不是太熟悉，于是便先用了一个自带的轮播效果。这个轮播效果是怎么样的呢，就是一个淡入淡出的效果，这里京东的做法是利用opacity的值来达到效果。接下来笔者就用opacity值的变化来实现《选项卡特效之淡入淡出》，放张效果图：

源码如下：

<!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>选项卡特效之淡入淡出2--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="选项卡特效,淡入淡出,jq特效,鼠标特效,opacity,fadeIn">
<meta name="description" content="选项卡特效,淡入淡出,jq特效,鼠标特效,opacity,fadeIn">
<script type="text/javascript"  src="/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().animate({"opacity":"1"},800).siblings().stop().animate({"opacity":"0"},800);
　　   $(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_bd .ce li{position:absolute;top:0;left:0;}
.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><a href="/jquery/" target="_blank"><img src="/d/file/css3/2013-10-10/三只小鼠.jpg"></a></li>
<li style="opacity:0"><a href="/jquery/"><img src="/d/file/css3/2013-10-10/老二占领右食槽.jpg"></a></li>
<li style="opacity:0"><a href="/jquery/"><img src="/d/file/css3/2013-10-10/可怜的老三.jpg"></a></li>
</ul>
</div>
</div>
</body>
</html>

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

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

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

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