一个js实现的所谓的滑动门- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个js实现的所谓的滑动门

Javascript: 用JavaScript实现浏览器地震效果; Javascript实例教程(8) 利用Javascript基于浏览器类型的重定向; Javascript实例教程(14) 鼠标触发窗口; 使主页呈现“飞舞”特效; Javascript实例教程(21) OLE Automation(1); Javascript实例教程(13) 鼠标移过时报警; Javascript实例教程(10) 随机显示图片; Javascript实例教程(2) 创建弹出式窗口; JavaScript 小技巧(第十集); Javascript实例教程(3) 创建折叠式导航菜单; Javascript实例教程(7) 利用Javascript进行密码保护; 完美解决一个事件激活多个函数(2); Javascript模拟游戏中的弹出菜单效果; Javascript实例教程(6) 在一个表单中设置和检查Cookies; JavaScript 小技巧(第八集); Javascript实例教程(4) 探测浏览器插件; JavaScript 小技巧(第九集); JavaScript学习:基础继承机制; 初学Javascript之cookie篇(译); 让弹出窗口变得“体贴”一些(javascript)

No. « ‹ 10 11 12 13 › »

技术文章搜索

关键字

Javascript 中的一个js实现的所谓的滑动门

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 47 ::

收藏到网摘: n/a

无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee OfflineSave离线保存代码再次发布使用说明

滑动门：我不理解为什么这样叫。
我就命名为：JMenuTab吧，因为写它是为了当我的菜单。
IE6,FireFox下测试通过。

复制代码代码如下:

<!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>无标题文档</title> 
<link href="JTabRes1/JMenuTab.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
body { 
 margin: 0px; 
} 
--> 
</style> 
</head> 
<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 <tr> 
 <td width="200"> </td> 
 <td id="menuBar"></td> 
 </tr> 
</table> 
<div id="page1">大大小小多多少少<br /> 
人口手足</div> 
<div id="page2">ABCDEFG</div> 
<div id="page3"><img src="loading.gif" /></div> 
<div id="pageHelp"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 <tr> 
 <td>JMenuTab 帮助：</td> 
 </tr> 
 <tr> 
 <td>Author:xling　Blog:http://xling.blueidea.com 　2007/05/23 </td> 
 </tr> 
 <tr> 
 <td>写这个程序只是为了解决燃眉之急（汉，虽然是急，我还是写了一天）！</td> 
 </tr> 
 <tr> 
 <td>程序中用到图片是修改了网上现有图片，所以，外表和某些网站上的一样，请不要见怪。因为除了图片，全是原创(不曾参考任何类似程序)！</td> 
 </tr> 
 <tr> 
 <td>IE6,Firefox下测试通过。</td> 
 </tr> 
 <tr> 
 <td>调用方法(注意顺序)：</td> 
 </tr> 
 <tr> 
 <td>var menuTab = new JMenuTab(null,null,"menuBar");<br /> 
menuTab.create();<br /> 
menuTab.addTab("首页");<br /> 
menuTab.addTab("组织架构","page1");<br /> 
menuTab.addTab("员工信息","page2");<br /> 
menuTab.addTab("业务知识","page3"); 
<br /> 
menuTab.addTab("Help","pageHelp");<br /> 
menuTab.setActiveTab(2);</td> 
 </tr> 
</table> 
</div> 
</body> 
</html> 
<script language="javascript" type="text/javascript"> 
function JMenuTab(pWidth,pHeight,pBody){ 
 var self = this; 
 //________________________________________________ 
 var width = pWidth; 
 var height = pHeight; 
 var titleHeight = 24; 
 //________________________________________________ 
 var oOutline = null; 
 var oTitleOutline = null; 
 var oPageOutline = null; 
 var oTitleArea = null; 
 var oPageArea = null; 
 var tabArray = new Array(); 
 var activedTab = null; 
 //________________________________________________ 
 var $ = function(pObjId){ 
 return document.getElementById(pObjId); 
 } 
 //________________________________________________ 
 var body = $(pBody) || document.body; 
 //________________________________________________ 
 var htmlObject = function(pTagName){ 
 return document.createElement(pTagName); 
 } 
 //________________________________________________ 
 var isRate = function(pRateString){ 
 if(!isNaN(pRateString)) return false; 
 if(pRateString.substr(pRateString.length-1,1) != "%") 
 return false; 
 if(isNaN(pRateString.substring(0,pRateString.length - 1))) 
 return false; 
 return true; 
 } 
 //________________________________________________ 
 var createOutline = function(){ 
 oOutline = htmlObject("DIV"); 
 body.appendChild(oOutline); 
 oOutline.className = "oOutline"; 
 } 
 //________________________________________________ 
 var createTitleOutline = function(){ 
 oTitleOutline = htmlObject("DIV"); 
 oOutline.appendChild(oTitleOutline); 
 oTitleOutline.className = "oTitleOutline"; 
 var vTable = htmlObject("TABLE"); 
 oTitleOutline.appendChild(vTable); 
 vTable.width = "100%"; 
 vTable.border = 0; 
 vTable.cellSpacing = 0; 
 vTable.cellPadding = 0; 
 var vTBody = htmlObject("TBODY"); 
 vTable.appendChild(vTBody); 
 var vTr1 = htmlObject("TR"); 
 vTBody.appendChild(vTr1); 
 var vTdTopLeft = htmlObject("TD"); 
 vTr1.appendChild(vTdTopLeft); 
 vTdTopLeft.height = titleHeight; 
 vTdTopLeft.className = "oTopLeft"; 
 oTitleArea = htmlObject("TD");///////////////////////////////// 
 vTr1.appendChild(oTitleArea); 
 oTitleArea.className = "oTitleArea"; 
 var vTdTopRight = htmlObject("TD"); 
 vTr1.appendChild(vTdTopRight); 
 vTdTopRight.className = "oTopRight"; 
 } 
 this.setTitleHeight = function(pHeight){ 
 //设置标题区域的高度 
 } 
 //________________________________________________ 
 var tabBtn_click = function(){ 
 self.setActiveTab(this.index); 
 } 
 var tabBtn_mouseover = function(){ 
 if(this.className =="oTabBtnActive") 
 return; 
 this.className = "oTabBtnHover"; 
 } 
 var tabBtn_mouseout = function(){ 
 if(this.className =="oTabBtnActive") 
 return; 
 this.className = "oTabBtn"; 
 } 
 //________________________________________________ 
 var createTabBtn = function(pLabel,pTabPage){ 
 var vTabBtn = htmlObject("DIV"); 
 oTitleArea.appendChild(vTabBtn); 
 vTabBtn.className = "oTabBtn"; 
 vTabBtn.index = tabArray.length; 
 vTabBtn.tabPage = pTabPage; 
 vTabBtn.onclick = tabBtn_click; 
 vTabBtn.onmouseover = tabBtn_mouseover; 
 vTabBtn.onmouseout = tabBtn_mouseout; 
 tabArray.push(vTabBtn); 
 var vTabBtnL = htmlObject("DIV"); 
 vTabBtn.appendChild(vTabBtnL); 
 vTabBtnL.className = "oTabBtnLeft"; 
 vTabBtnC = htmlObject("DIV"); 
 vTabBtn.appendChild(vTabBtnC); 
 vTabBtnC.className = "oTabBtnCenter"; 
 vTabBtnC.innerHTML = pLabel; 
 vTabBtnR = htmlObject("DIV"); 
 vTabBtn.appendChild(vTabBtnR); 
 vTabBtnR.className = "oTabBtnRight"; 
 } 
 
 var createPageOutline = function(){ 
 oPageOutline = htmlObject("DIV"); 
 oOutline.appendChild(oPageOutline); 
 oPageOutline.className = "oPageOutline"; 
 var vTable = htmlObject("TABLE"); 
 oPageOutline.appendChild(vTable); 
 vTable.width = "100%"; 
 vTable.border = 0; 
 vTable.cellSpacing = 0; 
 vTable.cellPadding = 0; 
 vTable.style.borderCollapse = "collapse"; 
 vTable.style.tableLayout="fixed"; 
 var vTBody = htmlObject("TBODY"); 
 vTable.appendChild(vTBody); 
 var vTr1 = htmlObject("TR"); 
 vTBody.appendChild(vTr1); 
 var vTdBottomLeft = htmlObject("TD"); 
 vTr1.appendChild(vTdBottomLeft); 
 vTdBottomLeft.className = "oBottomLeft"; 
 vTdBottomLeft.rowSpan = 2; 
 oPageArea = htmlObject("TD");/////////////////////////////////////// 
 vTr1.appendChild(oPageArea); 
 oPageArea.className = "oPageArea"; 
 if(oPageArea.filters) 
 oPageArea.style.cssText = "FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward');"; 
 oPageArea.height = 10; 
 var vTdBottomRight = htmlObject("TD"); 
 vTr1.appendChild(vTdBottomRight); 
 vTdBottomRight.className = "oBottomRight"; 
 vTdBottomRight.rowSpan = 2; 
 var vTr2 = htmlObject("TR"); 
 vTBody.appendChild(vTr2); 
 var vTdBottomCenter = htmlObject("TD"); 
 vTr2.appendChild(vTdBottomCenter); 
 vTdBottomCenter.className = "oBottomCenter"; 
 } 
 //________________________________________________ 
 this.addTab = function (pLabel,pPageBodyId){ 
 createTabBtn(pLabel,pPageBodyId); 
 if($(pPageBodyId)){ 
 oPageArea.appendChild($(pPageBodyId)); 
 $(pPageBodyId).style.display = "none"; 
 } 
 } 
 //________________________________________________ 
 this.setActiveTab = function(pIndex){ 
 if(oPageArea.filters) 
 oPageArea.filters[0].apply(); 
 if(activedTab != null){ 
 activedTab.className = "oTabBtn"; 
 if($(activedTab.tabPage)) 
 $(activedTab.tabPage).style.display = "none"; 
 } 
 activedTab = tabArray[pIndex]; 
 activedTab.className = "oTabBtnActive"; 
 if($(activedTab.tabPage)) 
 $(activedTab.tabPage).style.display = ""; 
 if(oPageArea.filters) 
 oPageArea.filters[0].play(duration=1); 
 }; 
 //________________________________________________ 
 
 this.create = function(){ 
 createOutline(); 
 createTitleOutline(); 
 createPageOutline(); 
 } 
} 
var menuTab = new JMenuTab(null,null,"menuBar"); 
 menuTab.create(); 
 menuTab.addTab("首页"); 
 menuTab.addTab("组织架构","page1"); 
 menuTab.addTab("员工信息","page2"); 
 menuTab.addTab("业务知识","page3"); 
 menuTab.addTab("ISO系统"); 
 menuTab.addTab("办公环境"); 
 menuTab.addTab("公司新闻"); 
 menuTab.addTab("公共政策"); 
 menuTab.addTab("链接总部"); 
 menuTab.addTab("Help","pageHelp"); 
 menuTab.setActiveTab(2); 
</script>

请下载源码察看效果。

无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee OfflineSave离线保存代码再次发布使用说明

Javascript 中的 一个js实现的所谓的滑动门

评论 (0) All

Javascript 中的一个js实现的所谓的滑动门