欢迎来到福编程网,本站提供各种互联网专业知识!

仿客齐集首页导航条DIV+CSS+JS [代码实例]

发布时间:2007-04-26 作者: 来源:转载
作者子鼠客齐集首页的一个效果,今天有人问我是怎么写的,于是晚上就又重写了一个;顺便把那个布局再理一下;你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn我试着不用position:absolute的方法;但写起来太难了;后来还是用position:absolute了;但
作者子鼠
客齐集首页的一个效果,今天有人问我是怎么写的,于是晚上就又重写了一个;顺便把那个布局再理一下;
你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn
我试着不用position:absolute的方法;但写起来太难了;后来还是用position:absolute了;但在客齐集站上的是没有用的;真不知道当时是怎么写出来的;
以下是效果图:


以下是布局部分
复制代码 代码如下:



    热门活动


    最新功能


    服务承诺


    最新成功故事


    热贴推荐



子鼠00001

子鼠00002

子鼠00003

子鼠00004

子鼠00005


以下是CSS部分:CSS还是没有优化的;
复制代码 代码如下:


以下为JS部分:由于javascript对于我来说太难了;所以可能这部分写的比较烂,但效果是出来了;
复制代码 代码如下:

vark=Math.floor(Math.random()*5+1);
for(i=1;i<6;i++){
if(i==k){
document.getElementById("info"+i).className="sw";
document.getElementById("tag"+i).className="ha";
document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
}
else{
document.getElementById("info"+i).className="hd";
}
}
functionkijijitag(tag){
for(i=1;i<6;i++)
{
if(i==tag)
{
document.getElementById("info"+i).className="sw";
document.getElementById("tag"+i).className="ha";
document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc";
}
else{
document.getElementById("info"+i).className="hd";
document.getElementById("tag"+i).className="";
document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
}
}
}


以下是用到的四个图:

按此在新窗口打开图片

看下效果吧!

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
特别说明:

1、CSS部分不是很清晰,因为写的我都有点晕了;
2、五个TAG是随机换的;
3、JS部分还可以再精简一些,但要有CSS支持;

相关推荐