chen'mo
2015-04-09 / 0 评论 / 434 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于1970年01月01日,已超过19811天没有更新,若内容或图片失效,请留言反馈。

原生JS写的网站常用简洁TAB选项卡是一款代码简洁易用,兼容主流浏览器。 这款代码特别用到了渐显效果,这在一般原生JS中较少见,只常见于jquery写的网页

<!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=gb2312" />
<title>JS网站常用简洁TAB选项卡</title>
<style>
*{margin:0;padding:0;}
body{font-size:14px;font-family:"Microsoft YaHei";}
ul,li{list-style:none;}

#tab{position:relative;}
#tab .tabList ul li{
	float:left;
	background:#fefefe;
	background:-moz-linear-gradient(top, #fefefe, #ededed);	
	background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
	background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
	border:1px solid #ccc;
	padding:5px 0;
	width:100px;
	text-align:center;
	margin-left:-1px;
	position:relative;
	cursor:pointer;
}
#tab .tabCon{
	position:absolute;
	left:-1px;
	top:32px;
	border:1px solid #ccc;
	border-top:none;
	width:403px;
	height:100px;
}
#tab .tabCon div{
	padding:10px;
	position:absolute;
	opacity:0;
	filter:alpha(opacity=0);
}
#tab .tabList li.cur{
	border-bottom:none;
	background:#fff;
}
#tab .tabCon div.cur{
	opacity:1;
	filter:alpha(opacity=100);
}
</style>
 <script type="text/javascript">
window.onload = function() {
    var oDiv = document.getElementById("tab");
    var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
    var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
    var timer = null;
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].index = i;
        oLi[i].onclick = function() {
            show(this.index);
        }
    }
    function show(a) {
        index = a;
        var alpha = 0;
        for (var j = 0; j < oLi.length; j++) {
            oLi[j].className = "";
            aCon[j].className = "";
            aCon[j].style.opacity = 0;
            aCon[j].style.filter = "alpha(opacity=0)";
        }
        oLi[index].className = "cur";
        clearInterval(timer);
        timer = setInterval(function() {
            alpha += 2;
            alpha > 100 && (alpha = 100);
            aCon[index].style.opacity = alpha / 100;
            aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
            alpha == 100 && clearInterval(timer);
        },
        5)
    }
}
</script>
</head>
<!-- 代码 开始 -->
<div id="tab" style="margin-left:460px;margin-top:20px">
  <div class="tabList">
	<ul>
		<li class="cur">许嵩</li>
		<li>周杰伦</li>
		<li>林俊杰</li>
		<li>陈奕迅</li>
	</ul>
  </div>
  <div class="tabCon">
	<div class="cur">断桥残雪、千百度、幻听、想象之中</div>
	<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
	<div>被风吹过的夏天、江南、一千年以后</div>
	<div>十年、K歌之王、浮夸</div>
  </div>
</div>
<!-- 代码 结束 -->
<div style="clear:both"></div><br /><br /><br /><br /><br /><br />
<div style="text-align:center">
<p></p>
</div>
</body>
</html>
来源:站长窝
0
如果老婆和女朋友她们是程序
« 上一篇 04-09
我追一女生很久,她拒绝我,不甘心,该放弃吗?
下一篇 » 04-23

评论 (0)

插入图片