JS實(shí)現(xiàn)常見(jiàn)的TAB、彈出層效果(TAB標(biāo)簽，斑馬線(xiàn)，遮罩層等)
更新時(shí)間：2015年10月08日 10:01:03 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)常見(jiàn)的TAB、彈出層效果,包括TAB標(biāo)簽，斑馬線(xiàn)，遮罩層等.以完整實(shí)例總結(jié)分析了JavaScript實(shí)現(xiàn)tab切換、隔行變換及彈出遮罩層的完整實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)常見(jiàn)的TAB、彈出層效果。分享給大家供大家參考。具體如下：
這里演示tab活頁(yè)夾（網(wǎng)頁(yè)標(biāo)簽），斑馬線(xiàn)，遮罩層、彈出層的簡(jiǎn)單實(shí)現(xiàn)，里面的JS文件，可下拉保存為JS代碼調(diào)用即可，也可以拷貝在本網(wǎng)頁(yè)中使用。這個(gè)小網(wǎng)頁(yè)囊括了目前網(wǎng)上流行的風(fēng)頁(yè)標(biāo)簽、彈出層以及斑馬線(xiàn)效果，很實(shí)用啦。
運(yùn)行效果截圖如下：
在線(xiàn)演示地址如下：
http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/
具體代碼如下：
<!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>tab活頁(yè)夾，斑馬線(xiàn)，遮罩層）的簡(jiǎn)單實(shí)現(xiàn)</title>
<style type="text/css">
* {margin:0;padding:0;list-style:none;font-size:12px;line-height:20px;font-family:Arial;}
h1,h2,h3 { font-size:14px; margin:10px 0;}
hr { margin:10px 0; height:1px;clear:both;border:0; background:#c00;}
a:link,a:visited{color:#164A84;text-decoration:none;}
a:hover,a:active{color:#c00;text-decoration:underline;}
table { border-collapse:collapse;border:1px solid #ccc;border-width:1px 1px 0 0; margin-left:20px;}
td,th { padding:5px;border:1px solid #ccc;border-width:0 0 1px 1px;}
</style>
<script type="text/javascript">
function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}}
function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}}
function BtTabRemove(index,head,divs) {
var tab_heads = document.getElementById(head);
if (tab_heads) {
var lis = tab_heads.getElementsByTagName("li"); var as = tab_heads.getElementsByTagName("a");
for(var i=0;i<as.length;i++){lis[i].className = "";BtHide(divs+"_"+i);if (i==index) {lis[i].className = "current";}}
BtShow(divs+"_"+index)}
}
function BtTabOn(head,divs){
var tab_heads=document.getElementById(head);
if (tab_heads) {
BtTabRemove(0,head,divs);
var alis=tab_heads.getElementsByTagName("a");
for(var i=0;i<alis.length;i++) {
alis[i].num=i;
alis[i].onclick = function(){BtTabRemove(this.num,head,divs);this.blur();return false;}
alis[i].onfocus = function(){BtTabRemove(this.num,head,divs)}}}
}
function BtZebraStrips(id,tag) {
var ListId = document.getElementById(id);
if(ListId){
var tags = ListId.getElementsByTagName(tag);
for(var i=0;i<tags.length;i++) {
tags[i].className += " barry"+i%2;
tags[i].onmouseover = function(){this.className += " hover"}
tags[i].onmouseout = function(){this.className = this.className.replace(" hover","")}}}
}
function BtPopload(showId){//蒙版生成div+iframe
var h = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) + 'px';
var w = document.documentElement.scrollWidth + 'px';
var popCss = "background:#000;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;"
var exsit = document.getElementById("popBox");
if (!exsit) {
pop_Box = document.createElement("div");pop_Box.id = "popBox";
document.getElementsByTagName("body")[0].appendChild(pop_Box);
pop_Box.style.cssText = popCss;pop_Box.style.zIndex = "10";
pop_Box.style.height = h;pop_Box.style.width = w;
pop_Iframe = document.createElement("iframe");pop_Iframe.id = "popIframe";
document.getElementsByTagName("body")[0].appendChild(pop_Iframe);
pop_Iframe.style.cssText = popCss;pop_Iframe.style.zIndex = "9";
pop_Iframe.style.height = h;pop_Iframe.style.width = (parseInt(w)-5)+"px";
}
BtShow("popIframe");BtShow("popBox");BtShow(showId);
pop_Win = document.getElementById(showId);
pop_Win.style.position = "absolute";
pop_Win.style.zIndex = "11";
pop_Win.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight/2-pop_Win.offsetHeight/2+ 'px';
pop_Win.style.left = (document.documentElement.clientWidth/2-pop_Win.offsetWidth/2) + 'px';
}
function BtPopShow(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtPopload(Did);return false;}}
}
function BtPopHide(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtHide(Did);BtHide("popBox");BtHide("popIframe");return false;}}
}
</script>
</head>
<body style="padding:0 40px;">
<style type="text/css">
.tabs {position:relative;width:300px;height:260px;border:1px solid #ccc;margin:0 20px;}
.tabs ul {width:200px;height:21px;overflow:hidden;position:absolute;top:0;left:0;}
.tabs ul li {float:left;width:60px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;text-align:center;background:#f5f5f5;}
.tabs ul li.current { border-bottom:0; background:#fff;}
.tabs ul li a {color:#4a4a4a;display:block;width:100%;font-size:14px;text-decoration:none;}
.tabs ul li a:visited { color:#4a4a4a;}
.tabs .tablist {height:260px;overflow:hidden;}
.tabs .s {width:300px;height:460px;overflow:hidden;text-align:center;font-size:40px;color:#4a4a4a;line-height:160px; background:#fff;}
.tabs a.more { background:#fff;color:#4a4a4a;line-height:20px;float:right;padding:0 5px; font-family:Verdana;}
</style>
<h2>1:tab</h2>
<div class="tabs">
<ul id="head">
<li><a href="#s_0">S1</a></li>
<li><a href="#s_1">S2</a></li>
<li><a href="#s_2">S3</a></li>
</ul>
<div class="tablist">
<div class="s" id="s_0">
<a href="#" class="more">More s1</a>
s1 content
</div>
<div class="s" id="s_1">
<a href="#" class="more">More s2</a>
s2 content
</div>
<div class="s" id="s_2">
<a href="#" class="more">More s3</a>
s3 content
</div>
</div>
</div>
<script type="text/javascript">BtTabOn("head","s")</script>
<hr />
<style type="text/css">
.barry1 {background:#f5f5f5;}
.barry0 {background:#fff;}
.hover {background:#ddd;}
</style>
<h2>2:斑馬線(xiàn)</h2>
<div class="hot_car" id="hot_car">
<table cellpadding="0" cellspacing="0">
<thead><tr><td>廠(chǎng)商指導(dǎo)價(jià)</td><td>經(jīng)銷(xiāo)商報(bào)價(jià)</td><td>促銷(xiāo)信息</td><td>報(bào)價(jià)時(shí)間</td></tr></thead>
<tr><td>19.08萬(wàn)</td><td>19.18萬(wàn)</td> <td>慶賀奇瑞北京突破10萬(wàn)輛全系大酬賓</td><td>2008-12-15</td></tr>
<tr><td>19.08萬(wàn)</td><td>19.18萬(wàn)</td> <td>慶賀奇瑞北京突破10萬(wàn)輛全系大酬賓</td><td>2008-12-15</td></tr>
<tr><td>19.08萬(wàn)</td><td>19.18萬(wàn)</td> <td>慶賀奇瑞北京突破10萬(wàn)輛全系大酬賓</td><td>2008-12-15</td></tr>
<tr><td>19.08萬(wàn)</td><td>19.18萬(wàn)</td> <td>慶賀奇瑞北京突破10萬(wàn)輛全系大酬賓</td><td>2008-12-15</td></tr>
<tr><td>19.08萬(wàn)</td><td>19.18萬(wàn)</td> <td>慶賀奇瑞北京突破10萬(wàn)輛全系大酬賓</td><td>2008-12-15</td></tr>
<tr><td>19.08萬(wàn)</td><td>19.18萬(wàn)</td> <td>慶賀奇瑞北京突破10萬(wàn)輛全系大酬賓</td><td>2008-12-15</td></tr>
<tr><td>19.08萬(wàn)</td><td>19.18萬(wàn)</td> <td>慶賀奇瑞北京突破10萬(wàn)輛全系大酬賓</td><td>2008-12-15</td></tr>
</table>
</div>
<style type="text/css">
.ul { margin:20px 0 0 20px;width:300px;border:1px solid #ccc;border-bottom:0;}
.ul li { height:20px; padding:3px 5px;border-bottom:1px solid #ccc;}
</style>
<ul id="ul" class="ul">
<li><span>[<a href="#">企業(yè)</a>]</span> <a href="#">每條最多19個(gè)字 </a></li>
<li><span>[<a href="#">代碼</a>]</span> <a href="#">第一屆世界智力運(yùn)動(dòng)成式成</a></li>
<li><span>[<a href="#">企業(yè)</a>]</span> <a href="#">上海通用汽車(chē)鼎持全球俱樂(lè)部山 </a></li>
<li><span>[<a href="#">特效</a>]</span> <a href="#">推動(dòng)和諧發(fā)展 打造綠色企業(yè)</a></li>
<li><span>[<a href="#">企業(yè)</a>]</span> <a href="#">發(fā)現(xiàn)商業(yè)智慧 見(jiàn)證進(jìn)步思想</a></li>
<li><span>[<a href="#">編程</a>]</span> <a href="#">成就汽車(chē)維修“金藍(lán)領(lǐng)”夢(mèng)想</a></li>
<li><span>[<a href="#">源碼</a>]</span> <a href="#">發(fā)現(xiàn)商業(yè)智慧 見(jiàn)證進(jìn)步思想</a></li>
<li><span>[<a href="#">風(fēng)格</a>]</span> <a href="#">成就汽車(chē)維修“金藍(lán)領(lǐng)”夢(mèng)想</a></li>
<li><span>[<a href="#">程序</a>]</span> <a href="#">發(fā)現(xiàn)商業(yè)智慧 見(jiàn)證進(jìn)步思想</a></li>
<li><span>[<a href="#">行業(yè)</a>]</span> <a href="#">成就汽車(chē)維修“金藍(lán)領(lǐng)”夢(mèng)想</a></li>
</ul>
<script type="text/javascript">BtZebraStrips("hot_car","tr");BtZebraStrips("ul","li")</script>
<hr />
<style type="text/css">
.pop { border:3px solid skyblue;width:400px; background:#fff; padding:5px; display:none;}
</style>
<h2>3:遮罩層</h2>
<a href="#" id="open" style="margin-left:20px">點(diǎn)擊彈出</a>
<div class="pop" id="pop"><a href="#" id="close">點(diǎn)擊關(guān)閉</a></div>
<script type="text/javascript">BtPopShow("open","pop");BtPopHide("close","pop")</script>
<hr />
</body>
</html>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- javascript實(shí)現(xiàn)table表格隔行變色的方法
- javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法
- 原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色
- 高效的表格行背景隔行變色及選定高亮的JS代碼
- JS控制表格隔行變色
- js取模（求余數(shù)）隔行變色
- JS小功能(列表頁(yè)面隔行變色)簡(jiǎn)單實(shí)現(xiàn)
- Table隔行變色的JavaScript代碼
- js隔行變色、鼠標(biāo)劃過(guò)變色代碼
- JS與jQuery實(shí)現(xiàn)隔行變色的方法
- JavaScript實(shí)現(xiàn)的斑馬線(xiàn)表格效果【隔行變色】
相關(guān)文章
uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能
這篇文章主要給大家介紹了關(guān)于uniapp原生tabbar設(shè)置并添加數(shù)字角標(biāo)或小紅點(diǎn)提示功能的相關(guān)資料,在相應(yīng)的頁(yè)面中完成對(duì)消息的處理,如果有新消息,則在tabBar頁(yè)面中顯示紅點(diǎn)提醒用戶(hù),需要的朋友可以參考下2023-08-08
本篇文章主要是對(duì)js輸出陰歷、陽(yáng)歷、年份、月份、周示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
javascript中json基礎(chǔ)知識(shí)詳解
本文主要介紹了json的基礎(chǔ)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能的兩種方法
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了bootstrap輸入框組件使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript中定時(shí)控制Throttle、Debounce和Immediate詳解
大家可能都知道JavaScript遵循事件驅(qū)動(dòng)的編程范例，這意味著一些行為可以激活一些響應(yīng)，并且這些響應(yīng)僅在發(fā)生特定的行為時(shí)才被激活。這篇文章將給大家詳細(xì)介紹JavaScript中的定時(shí)控制Throttle、Debounce和Immediate，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-11-11
javascript實(shí)現(xiàn)dom動(dòng)態(tài)創(chuàng)建省市縱向列表菜單的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)dom動(dòng)態(tài)創(chuàng)建省市縱向列表菜單的方法,可實(shí)現(xiàn)省市列表菜單效果,涉及javascript鼠標(biāo)事件及頁(yè)面處理json數(shù)據(jù)的技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JavaScript小技巧整理篇(非常全)的相關(guān)資料,需要的朋友可以參考下2016-01-01
下面小編就為大家?guī)?lái)一篇js獲取隱藏元素寬高的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
這篇文章主要介紹了Webpack 是如何加載模塊的，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05