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

图片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;
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);
}
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';
//定义标签的初始颜色
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();
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();
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();

