Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

JS implements common TAB and pop-up layer effects (TAB labels, zebra crossings, mask layers, etc.)_javascript skills

WBOY
Release： 2016-05-16 15:37:11
Original
1518 people have browsed it

The example in this article describes how to implement common TAB and pop-up layer effects with JS. Share it with everyone for your reference. The details are as follows:

Here is a demonstration of the simple implementation of tab binders (web page tags), zebra crossings, mask layers, and pop-up layers. The JS files inside can be pulled down and saved as JS code calls, or they can be copied and used in this web page. This small web page includes the trendy page tags, pop-up layers and zebra crossing effects that are currently popular on the Internet. It is very practical.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/

The specific code is as follows: 

<!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活页夹，斑马线，遮罩层）的简单实现</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:斑马线</h2>
<div class="hot_car" id="hot_car">
<table cellpadding="0" cellspacing="0">
 <thead><tr><td>厂商指导价</td><td>经销商报价</td><td>促销信息</td><td>报价时间</td></tr></thead>
 <tr><td>19.08万</td><td>19.18万</td> <td>庆贺奇瑞北京突破10万辆全系大酬宾</td><td>2008-12-15</td></tr>
 <tr><td>19.08万</td><td>19.18万</td> <td>庆贺奇瑞北京突破10万辆全系大酬宾</td><td>2008-12-15</td></tr>
 <tr><td>19.08万</td><td>19.18万</td> <td>庆贺奇瑞北京突破10万辆全系大酬宾</td><td>2008-12-15</td></tr>
 <tr><td>19.08万</td><td>19.18万</td> <td>庆贺奇瑞北京突破10万辆全系大酬宾</td><td>2008-12-15</td></tr>
 <tr><td>19.08万</td><td>19.18万</td> <td>庆贺奇瑞北京突破10万辆全系大酬宾</td><td>2008-12-15</td></tr>
 <tr><td>19.08万</td><td>19.18万</td> <td>庆贺奇瑞北京突破10万辆全系大酬宾</td><td>2008-12-15</td></tr>
 <tr><td>19.08万</td><td>19.18万</td> <td>庆贺奇瑞北京突破10万辆全系大酬宾</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="#">企业</a>]</span> <a href="#">每条最多19个字 </a></li>
 <li><span>[<a href="#">代码</a>]</span> <a href="#">第一届世界智力运动成式成</a></li>
 <li><span>[<a href="#">企业</a>]</span> <a href="#">上海通用汽车鼎持全球俱乐部山 </a></li>
 <li><span>[<a href="#">特效</a>]</span> <a href="#">推动和谐发展 打造绿色企业</a></li>
 <li><span>[<a href="#">企业</a>]</span> <a href="#">发现商业智慧 见证进步思想</a></li>
 <li><span>[<a href="#">编程</a>]</span> <a href="#">成就汽车维修“金蓝领”梦想</a></li>
 <li><span>[<a href="#">源码</a>]</span> <a href="#">发现商业智慧 见证进步思想</a></li>
 <li><span>[<a href="#">风格</a>]</span> <a href="#">成就汽车维修“金蓝领”梦想</a></li>
 <li><span>[<a href="#">程序</a>]</span> <a href="#">发现商业智慧 见证进步思想</a></li>
 <li><span>[<a href="#">行业</a>]</span> <a href="#">成就汽车维修“金蓝领”梦想</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">点击弹出</a>
<div class="pop" id="pop"><a href="#" id="close">点击关闭</a></div>
<script type="text/javascript">BtPopShow("open","pop");BtPopHide("close","pop")</script>
<hr />
</body>
</html>
Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.

Related labels：
js tab Pop-up layer mask layer
source：php.cn
Previous article：jQuery drag layout and save its results to database_jquery Next article：JS implements mouse drag effect of expandable folding layer_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Can a workerpool declared in multiple routes still maintain its cpu usage without caring about the threshold I'm hoping to find a node.js system with a workerpool to handle CPU intensive tasks, but I...
From 2024-04-06 19:54:23
0
1
444
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
Show hidden side panels: checked I would like to have a navigation menu in the side panel with the ability to switch to vie...
From 2024-04-06 15:49:33
0
1
319
Should we use SSG to deploy dashboards created with Nuxt.js? We will develop a dashboard for internal use using Nuxt.js. Since this will be an internal...
From 2024-04-06 13:17:44
0
1
493
Electron gets AppData on preload How to get the preloaded AppData directory? Background.js[...]asyncfunctioncreateWindow(){...
From 2024-04-06 11:05:31
0
1
417
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template