上一篇
下一篇
一个综合TAB切换和JS缓慢下拉窗口的实例
作者:kekaku 日期:2009-06-18
一个比较实用的小窗口，点击窗口缓缓下拉，然后在导航点击进行内容切换。
演示地址：http://www.kekaku.com/example/windows_tab.html{本例中背景图片均为PNG格式，所以在IE6下可能会出现不透明情况，请参照IE6下PNG图片透明(alpha通道)的5种方法进行修正或者修改背景图片的格式。}
xhtml代码如下：
程序代码
CSS如下：
程序代码
javascript如下：
程序代码
//获取对象的display属性
function GetDisplay(element)
{
if(element.currentStyle)
return element.currentStyle.display;
else
return window.getComputedStyle(element, null).display;
}
//获取对象的高与宽
function GetDimensions(element)
{
var display = GetDisplay(element);
if (display != 'none' && display != null)
return {width: element.offsetWidth, height: element.offsetHeight};
var els = element.style;
var originalVisibility = els.visibility;
var originalPosition = els.position;
var originalDisplay = els.display;
els.visibility = 'hidden';
els.position = 'absolute';
els.display = 'block';
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight;
els.display = originalDisplay;
els.position = originalPosition;
els.visibility = originalVisibility;
return {width: originalWidth, height: originalHeight};
}
//控制器
var blindControler;
//交替方法
function ToggleBlind(argId)
{
var element = document.getElementById(argId);
var orgSize = GetDimensions(element);
if(GetDisplay(element) == null || GetDisplay(element) == "none")
{
Balind(element,1,orgSize,30);
}
else
{
Balind(element,-1,orgSize,30);
}
}
//控制缩放element：对象;type：1为放，-1为缩;toSize:对象的高与宽;time：快慢
function Balind(element,type,toSize,time)
{
var pos = 0;
blindControler = setInterval(function(){
SetSize(element,{height:toSize.height,pos:(type>0?pos:100-pos)});
pos += 5;
if(pos==105){ClearBlind();}
},time);
}
//更改对象的高度
function SetSize(element,size)
{
element.style.height = size.height*size.pos/100+"px";
element.style.overflow = "hidden";
if(size.pos == 0)
{
element.style.display = "none";
element.style.height = null;
}
else
{
element.style.display = "block";
}
}
//清除控制器
function ClearBlind()
{
if(blindControler){clearInterval(blindControler);blindControler=null;}
}
function OpenOrClose(obj)
{
var element = document.getElementById("dvContent");
ToggleBlind('dvContent');
if(GetDisplay(element) == "block")
{
obj.className = "control1";
}
else
{
obj.className = "control2";
}
}
//
function showDiv(obj,num,length)
{
for(var id = 1;id<=length;id++)
{
var ss=obj+id;
var snav =obj+"nav"+id;
if(id==num){
try{document.getElementById(ss).style.display="block"}catch(e){};
//try{document.getElementById(snav).className="on"}catch(e){};
}else{
try{document.getElementById(ss).style.display="none"}catch(e){};
//try{document.getElementById(snav).className=""}catch(e){};
}
}
}
function showData(obj,num,length)
{
for(var id = 1;id<=length;id++)
{
var sdt=obj+id;
if(id==num){
try{document.getElementById(sdt).style.display="block"}catch(e){};
}else{
try{document.getElementById(sdt).style.display="none"}catch(e){};
}
}
}
演示地址：http://www.kekaku.com/example/windows_tab.html{本例中背景图片均为PNG格式，所以在IE6下可能会出现不透明情况，请参照IE6下PNG图片透明(alpha通道)的5种方法进行修正或者修改背景图片的格式。}
xhtml代码如下：
程序代码<!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>一个综合TAB切换和JS缓慢下拉窗口的实例-可咔酷</title>
</head>
<body>
<div style="position:absolute;left:40px;top:20px;">
<div class="box" id="dvContent">
<div id="div21"><span>阴阳家，代表人物邹衍，代表作《邹子》。</span></div>
<div id="div22" style="display:none"><span>杂家，代表人物吕不韦，代表作《吕氏春秋》。</span></div>
<div id="div23" style="display:none"><span>兵家，代表人物孙武、孙膑，代表作《孙子》、《孙膑兵法》。</span></div>
<div id="div24" style="display:none"><span>纵横家，代表人物苏秦、张仪，代表作《战国纵横家书》。</span></div>
</div>
<div class="boxnav" id="tab2">
<ul>
<li id="div2nav1" class="b1 on"><a onclick="javascript:showDiv('div2',1,4);">白天</a></li>
<li id="div2nav2" class="b2"><a onclick="javascript:showDiv('div2',2,4);">中午</a></li>
<li class="control1" onclick="OpenOrClose(this)"></li>
<li id="div2nav3" class="b3"><a onclick="javascript:showDiv('div2',3,4);">夜晚</a></li>
<li id="div2nav4" class="b4"><a onclick="javascript:showDiv('div2',4,4);">白天</a></li>
</ul>
</div>
<p><a href="http://www.kekaku.com">可咔酷-www.kekaku.com</a></p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一个综合TAB切换和JS缓慢下拉窗口的实例-可咔酷</title>
</head>
<body>
<div style="position:absolute;left:40px;top:20px;">
<div class="box" id="dvContent">
<div id="div21"><span>阴阳家，代表人物邹衍，代表作《邹子》。</span></div>
<div id="div22" style="display:none"><span>杂家，代表人物吕不韦，代表作《吕氏春秋》。</span></div>
<div id="div23" style="display:none"><span>兵家，代表人物孙武、孙膑，代表作《孙子》、《孙膑兵法》。</span></div>
<div id="div24" style="display:none"><span>纵横家，代表人物苏秦、张仪，代表作《战国纵横家书》。</span></div>
</div>
<div class="boxnav" id="tab2">
<ul>
<li id="div2nav1" class="b1 on"><a onclick="javascript:showDiv('div2',1,4);">白天</a></li>
<li id="div2nav2" class="b2"><a onclick="javascript:showDiv('div2',2,4);">中午</a></li>
<li class="control1" onclick="OpenOrClose(this)"></li>
<li id="div2nav3" class="b3"><a onclick="javascript:showDiv('div2',3,4);">夜晚</a></li>
<li id="div2nav4" class="b4"><a onclick="javascript:showDiv('div2',4,4);">白天</a></li>
</ul>
</div>
<p><a href="http://www.kekaku.com">可咔酷-www.kekaku.com</a></p>
</div>
</body>
</html>
CSS如下：
程序代码body{font-size:12px;}
ul,li{margin:0; padding:0; list-style:none;}
.box{
width:178px; margin:0 32px; height:100px;background-color:#ddd;filter: alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6; display:none; border:1px solid #000; padding:0 10px 0; border-bottom:0; line-height:18px;
}
.control1{
background-image:url(../images/bg_nav_down.png);
margin:0 0 0;
width:35px;
height:20px;
cursor:pointer;
}
.control2{
background-image:url(../images/bg_nav_up.png);
margin:0 0 0;
width:35px;
height:20px;
cursor:pointer;
}
.boxnav{ width:264px; height:27px; background:url(../images/bg_nav.png) no-repeat;}
.boxnav ul{width:185px; margin:0 auto;}
.boxnav li{ float:left;font-size:12px; color:#dcdbc3; text-align:center; cursor:pointer;}
.boxnav li a,.boxnav li a:visited{font-size:12px; color:#dcdbc3; text-align:center; display:block; margin:4px 0 0;}
.boxnav li.b1{ width:34px;}
.boxnav li.b2{width:40px;}
.boxnav li.b3{width:40px;}
.boxnav li.b4{width:36px;}
ul,li{margin:0; padding:0; list-style:none;}
.box{
width:178px; margin:0 32px; height:100px;background-color:#ddd;filter: alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6; display:none; border:1px solid #000; padding:0 10px 0; border-bottom:0; line-height:18px;
}
.control1{
background-image:url(../images/bg_nav_down.png);
margin:0 0 0;
width:35px;
height:20px;
cursor:pointer;
}
.control2{
background-image:url(../images/bg_nav_up.png);
margin:0 0 0;
width:35px;
height:20px;
cursor:pointer;
}
.boxnav{ width:264px; height:27px; background:url(../images/bg_nav.png) no-repeat;}
.boxnav ul{width:185px; margin:0 auto;}
.boxnav li{ float:left;font-size:12px; color:#dcdbc3; text-align:center; cursor:pointer;}
.boxnav li a,.boxnav li a:visited{font-size:12px; color:#dcdbc3; text-align:center; display:block; margin:4px 0 0;}
.boxnav li.b1{ width:34px;}
.boxnav li.b2{width:40px;}
.boxnav li.b3{width:40px;}
.boxnav li.b4{width:36px;}
javascript如下：
程序代码//获取对象的display属性
function GetDisplay(element)
{
if(element.currentStyle)
return element.currentStyle.display;
else
return window.getComputedStyle(element, null).display;
}
//获取对象的高与宽
function GetDimensions(element)
{
var display = GetDisplay(element);
if (display != 'none' && display != null)
return {width: element.offsetWidth, height: element.offsetHeight};
var els = element.style;
var originalVisibility = els.visibility;
var originalPosition = els.position;
var originalDisplay = els.display;
els.visibility = 'hidden';
els.position = 'absolute';
els.display = 'block';
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight;
els.display = originalDisplay;
els.position = originalPosition;
els.visibility = originalVisibility;
return {width: originalWidth, height: originalHeight};
}
//控制器
var blindControler;
//交替方法
function ToggleBlind(argId)
{
var element = document.getElementById(argId);
var orgSize = GetDimensions(element);
if(GetDisplay(element) == null || GetDisplay(element) == "none")
{
Balind(element,1,orgSize,30);
}
else
{
Balind(element,-1,orgSize,30);
}
}
//控制缩放element：对象;type：1为放，-1为缩;toSize:对象的高与宽;time：快慢
function Balind(element,type,toSize,time)
{
var pos = 0;
blindControler = setInterval(function(){
SetSize(element,{height:toSize.height,pos:(type>0?pos:100-pos)});
pos += 5;
if(pos==105){ClearBlind();}
},time);
}
//更改对象的高度
function SetSize(element,size)
{
element.style.height = size.height*size.pos/100+"px";
element.style.overflow = "hidden";
if(size.pos == 0)
{
element.style.display = "none";
element.style.height = null;
}
else
{
element.style.display = "block";
}
}
//清除控制器
function ClearBlind()
{
if(blindControler){clearInterval(blindControler);blindControler=null;}
}
function OpenOrClose(obj)
{
var element = document.getElementById("dvContent");
ToggleBlind('dvContent');
if(GetDisplay(element) == "block")
{
obj.className = "control1";
}
else
{
obj.className = "control2";
}
}
//
function showDiv(obj,num,length)
{
for(var id = 1;id<=length;id++)
{
var ss=obj+id;
var snav =obj+"nav"+id;
if(id==num){
try{document.getElementById(ss).style.display="block"}catch(e){};
//try{document.getElementById(snav).className="on"}catch(e){};
}else{
try{document.getElementById(ss).style.display="none"}catch(e){};
//try{document.getElementById(snav).className=""}catch(e){};
}
}
}
function showData(obj,num,length)
{
for(var id = 1;id<=length;id++)
{
var sdt=obj+id;
if(id==num){
try{document.getElementById(sdt).style.display="block"}catch(e){};
}else{
try{document.getElementById(sdt).style.display="none"}catch(e){};
}
}
}
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论
