引用自 http://www.csrcode.cn/html/txdm/tcys/2293.htm
<!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>
<title>Ajax选项卡、隔行换色、弹出遮罩层丨芯晴网页特效丨CsrCode.Cn</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.getElementByIdx_x(id);if(Div){Div.style.display="none"}}
function BtShow(id){var Div = document.getElementByIdx_x(id);if(Div){Div.style.display="block"}}
function BtTabRemove(index,head,divs) {
<wbr>var tab_heads = document.getElementByIdx_x(head);<br><wbr>if (tab_heads) {<br><wbr>var lis = tab_heads.getElementsByTagName_r("li"); var as = tab_heads.getElementsByTagName_r("a");<br><wbr>for(var i=0;i<as.length;i++){lis[i].className = "";BtHide(divs+"_"+i);if (i==index) {lis[i].className = "current";}}<br><wbr>BtShow(divs+"_"+index)}<br> }</wbr></wbr></wbr></wbr></wbr>
function BtTabOn(head,divs){
<wbr>var tab_heads=document.getElementByIdx_x(head);<br><wbr>if (tab_heads) {<br><wbr>BtTabRemove(0,head,divs);<br><wbr>var alis=tab_heads.getElementsByTagName_r("a");<br><wbr>for(var i=0;i<alis.length;i++) {<br><wbr>alis[i].num=i;<br><wbr>alis[i].onclick = function(){BtTabRemove(this.num,head,divs);this.blur();return false;}<br><wbr>alis[i].onfocus = function(){BtTabRemove(this.num,head,divs)}}}<br> }</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
function BtZebraStrips(id,tag) {
<wbr>var ListId = document.getElementByIdx_x(id);<br><wbr>if(ListId){<br><wbr>var tags<wbr> = ListId.getElementsByTagName_r(tag);<br><wbr>for(var i=0;i<tags.length;i++) {<br><wbr>tags[i].className<wbr><wbr> += " barry"+i%2;<br><wbr>tags[i].onmouseover = function(){this.className += " hover"}<br><wbr>tags[i].onmouseout<wbr> = function(){this.className = this.className.replace(" hover","")}}}<br> }</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
function BtPopload(showId){
<wbr>var h = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) + 'px';<br><wbr>var w = document.documentElement.scrollWidth + 'px';<br><wbr>var popCss = "background:#000;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;"<br><wbr>var exsit = document.getElementByIdx_x("popBox");<br><wbr>if (!exsit) {<br><wbr> pop_Box = document.createElement_x("div");pop_Box.id = "popBox";<br><wbr> document.getElementsByTagName_r("body")[0].appendChild(pop_Box);<br><wbr> pop_Box.style.cssText = popCss;pop_Box.style.zIndex = "10";<br><wbr> pop_Box.style.height = h;pop_Box.style.width = w;<br><wbr><br><wbr> pop_Iframe = document.createElement_x("iframe");pop_Iframe.id = "popIframe";<br><wbr> document.getElementsByTagName_r("body")[0].appendChild(pop_Iframe);<br><wbr> pop_Iframe.style.cssText = popCss;pop_Iframe.style.zIndex = "9";<br><wbr> pop_Iframe.style.height = h;pop_Iframe.style.width = (parseInt(w)-5)+"px";<br><wbr>}<br><wbr>BtShow("popIframe");BtShow("popBox");BtShow(showId);<br><wbr>pop_Win = document.getElementByIdx_x(showId);<br><wbr>pop_Win.style.position = "absolute";<br><wbr>pop_Win.style.zIndex = "11";<br><wbr>pop_Win.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight/2-pop_Win.offsetHeight/2+ 'px';<br><wbr>pop_Win.style.left = (document.documentElement.clientWidth/2-pop_Win.offsetWidth/2) + 'px';<br> }<br> function BtPopShow(Bid,Did) {<br><wbr>var UploadBtn = document.getElementByIdx_x(Bid);<br><wbr>if (UploadBtn){UploadBtn.onclick = function() {BtPopload(Did);return false;}}<br> }<br> function BtPopHide(Bid,Did) {<br><wbr>var UploadBtn = document.getElementByIdx_x(Bid);<br><wbr>if (UploadBtn){UploadBtn.onclick = function() {BtHide(Did);BtHide("popBox");BtHide("popIframe");return false;}}<br> }<br> </script><br> </head></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<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">
<wbr><ul id="head"><br><wbr> <li><a href="#s_0">PHP</a></li><br><wbr> <li><a href="#s_1">Ajax</a></li><br><wbr> <li><a href="#s_2">ASP</a></li><br><wbr></ul><br><wbr><div class="tablist"><br><wbr> <div class="s" id="s_0"><br><wbr><wbr> <a href="#" class="more">More PHP</a><br><wbr><wbr> s1 content<br><wbr> </div><br><wbr> <div class="s" id="s_1"><br><wbr><wbr> <a href="#" class="more">More Ajax</a><br><wbr><wbr> s2 content<br><wbr> </div><br><wbr> <div class="s" id="s_2"><br><wbr><wbr> <a href="#" class="more">More ASP</a><br><wbr><wbr> s3 content<br><wbr> </div><br><wbr></div><br> </div><br> <script type="text/javascript">BtTabOn("head","s")</script><br> <hr /><br> <style type="text/css"><br> .barry1 {background:#f5f5f5;}<br> .barry0 {background:#fff;}<br> .hover {background:#ddd;}<br> </style><br> <h2>2:隔行换色</h2><br> <div class="hot_car" id="hot_car"><br> <table cellpadding="0" cellspacing="0"><br><wbr><thead><tr><td>厂商指导价</td><td>经销商报价</td><td>促销信息</td><td>报价时间</td></tr></thead><br><wbr><tr><td>12.02万</td><td>19.18万</td> <td>五子棋游戏进阶版源码</td><td>2009-02-15</td></tr><br><wbr><tr><td>12.02万</td><td>19.18万</td> <td>五子棋游戏进阶版源码</td><td>2009-02-15</td></tr><br><wbr><tr><td>12.02万</td><td>19.18万</td> <td>五子棋游戏进阶版源码</td><td>2009-02-15</td></tr><br> </table><br> </div></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<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">
<wbr><li><span>[<a href="#">企业</a>]</span><wbr> <a href="#">VB监测键盘按下状态</a></li><br><wbr><li><span>[<a href="#">企业</a>]</span><wbr> <a href="#">图片旋转显示插件</a></li><br><wbr><li><span>[<a href="#">企业</a>]</span><wbr> <a href="#">播放器的窗体界面</a></li><br> </ul><br> <script type="text/javascript">BtZebraStrips("hot_car","tr");BtZebraStrips("ul","li")</script><hr /><br> <style type="text/css"><br> .pop { border:3px solid skyblue;width:400px; background:#fff; padding:5px; display:none;}<br> </style><br> <h2>3:遮罩层</h2><br> <a href="#" id="open" style="margin-left:20px">点击弹出</a><br> <div class="pop" id="pop">欢迎光临『芯晴网页特效』CsrCode.Cn。<wbr> <a href="#" id="close">点击关闭</a></div><br> <script type="text/javascript">BtPopShow("open","pop");BtPopHide("close","pop")</script><br> <hr /><br> </body><br> </html></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<p align="center">本特效由 <a href="http://www.CsrCode.cn">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</p>
扫一扫
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
