您的位置：首页 > Web前端

前端开发--TAB标签效果实现

2016-08-15 13:43 225 查看

知识基础：

*
这东西叫“通配符”用来匹配页面上所有元素。
*{margin:0;padding:0;}
对应的是页面上所有元素
定义和用法
<ul>
标签定义无序列表。
<li>标签定义列表项目。

定义和用法
opacity
属性设置元素的不透明级别。

opacity 属性设置或返回元素的不透明度。

元素的不透明度级别描述了透明度级别，当不透明度为 1 时表示完全不透明，当不透明度为 0.5时表示半透明，当不透明度为 0 时表示完全透明。
alpha滤镜

opacity是透明度
function test(){
alert("测试");

}
//
每过5秒钟就弹出提示信息"测试"。

var intervalId
= setInterval(test,
5000);
//
由于此时上述定时设置尚未执行，因此可以成功取消该定时设置

clearInterval(intervalId);

定义和用法
onmouseover
属性在鼠标指针移动到元素上时触发。
index
属性可返回下拉列表中选项的索引位置。
<html>

<head>
<title>
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>
</head>
<body>
<div id = "tab" 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>曹操, 一千年以后</div>
</ul>
</div>
</div>
<script>
window.onload = function(){
var oDiv = document.getElementById("tab");
var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
var oCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
var timer = null;
for(var i = 0; i < oLi.length; i++){
oLi[i].index = i;
oLi[i].onmouseover = function(){
show(this.index);
}
}

function show(a){
index = a ;
var alpha = 0;
for(var j = 0; j < oLi.length ; j++){
oLi[j].className = "";
oCon[j].className = "";
oCon[j].style.opacity =0;
oCon[j].style.filter ="alpha(opacity =0)";
}
oLi[index].className ="cur";
clearInterval(timer);
timer = setInterval(function(){
alpha += 2;
alpha >100 && (alpha = 100);
oCon[index].style.opacity = alpha/100;
oCon[index].style.filter ="alpha(opacity="+alpha +")";
alpha ==100 && clearInterval(timer);
}, 5)
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航