PHP成都培训中心官方网站
返回首页
当前位置: 主页 > 在线教学 > 书籍推荐 >

一种简易的网站首页下拉菜单与选项卡实现示例

时间:2009-05-25 08:53来源:源创 作者:php成都罗维 点击:
幻灯片,下拉菜单与选项卡已成为现在网站首页的标准,今天,以这三个主要效果为例,给同学们展示是如何实现的
  

幻灯片,下拉菜单与选项卡已成为现在网站首页的标准,今天,以这三个主要效果为例,给同学们展示是如何实现的


图片1
代码如下
//显示选项卡
function showCategory(section,id){
 var objSection=document.getElementById(section);
 //取这个块下的所有div,其中第一个块是菜单,余下的是新闻列表块
 var aObj=objSection.getElementsByTagName("div");
 //当前块的菜单
 var aObjMenu=aObj[0].getElementsByTagName("a");
 //处理菜单颜色
 for(var i=0;i<aObjMenu.length;i++){
  aObjMenu[i].style.backgroundColor=otherSectionMenuColor;
 }
 //id是从1开始计数的,数组是从0开始计数的
 aObjMenu[id-1].style.backgroundColor=initialSectionMenuColor;
 //alert(aObjMenu[id-1].clientWidth+'|'+aObjMenu[id-1].scrollLeft+'|'+aObjMenu[id-1].scrollHeight);
 //处理新闻标题块 i的初值为1是因为aObj[0]是菜单所在的div要跳过。
 for(var i=1;i<aObj.length;i++){
  aObj[i].style.display='none';
  
 }
 aObj[id].style.display='block';
 //aObj[id].style.height=aObj[id].style.height+1+'px';
 //aObj[id].style.borderBottom='solid 1px #FFFFFF';
 
 //处理底线
 //实现原理,每个section有一个动态添加的底线,位置在当前选中的div下面
 if(document.getElementById(section+'borderBottom')){
  var objBorderBottom=document.getElementById(section+'borderBottom');
  objBorderBottom.style.position='absolute';
  objBorderBottom.style.display='block';
  objBorderBottom.style.left=aObjMenu[id-1].offsetLeft+'px';
  //alert(objBorderBottom.style.top+"|"+objBorderBottom.style.left+"|"+objBorderBottom.style.width);
  //alert('d');
  //alert(aObjMenu[id-1].scrollHeight+"|"+aObjMenu[id-1].scrollLeft+"|"+aObjMenu[id-1].clientWidth);
  //alert(aObjMenu[id-1].scrollHeight+"|"+aObjMenu[id-1].clientLeft+"|"+aObjMenu[id-1].clientWidth);
  
 }else{
  var objBorderBottom=document.createElement('div');
  objBorderBottom.id=section+'borderBottom';
  objBorderBottom.style.position='absolute';
  objBorderBottom.style.display='block';
  objBorderBottom.style.top=aObjMenu[id-1].scrollHeight+'px';
  objBorderBottom.style.left=aObjMenu[id-1].scrollLeft+'px';
  objBorderBottom.style.width=aObjMenu[id-1].clientWidth+'px';
  //objBorderBottom.style.width='90px';
  objBorderBottom.style.height='0px';
  objBorderBottom.style.margin='0px';
  objBorderBottom.style.padding='0px';
  
  objBorderBottom.style.borderTop='solid 1px #FFFFFF';
  //objBorderBottom.style.backgroundColor='#000000';
  objBorderBottom.zIndex=objSection.zIndex+1;
  objSection.appendChild(objBorderBottom);
 }
}
//定义标签的初始颜色
var initialSectionMenuColor='#FFFFFF';
var otherSectionMenuColor='#EBF3FB';
//初始化每块区域第一个选项卡标签的颜色
function initMenuItem(){
 var aObj=document.getElementsByTagName("a");
 for(var i=0;i<aObj.length;i++){
  if(aObj[i].getAttribute("menuClass")=="initialMenuItem"){
   aObj[i].style.backgroundColor=initialSectionMenuColor;
  }
 }
 //var
 //bodySection
 
 
}
initMenuItem();
//图片轮换1
var div='topLeft';
var objAlterDiv=document.getElementById(div);
objAlterDiv.myfunc=function(){
 alterImage(objAlterDiv);
 window.setTimeout(objAlterDiv.myfunc,2000);
}
objAlterDiv.myfunc();
//图片轮换2
var div='topRight';
var objAlterDiv1=document.getElementById(div);
objAlterDiv1.myfunc=function(){
 alterImage(objAlterDiv1);
 window.setTimeout(objAlterDiv1.myfunc,8000);
}
objAlterDiv1.myfunc();
顶一下
(7)
87.5%
踩一下
(1)
12.5%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
发布者资料
ming 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:2009-01-01 16:01 最后登录:2010-04-26 17:04
推荐内容