美好养生网

全部频道

您的当前位置：首页仿客齐集首页导航条DIV+CSS+JS[代码实例]_经验交流

仿客齐集首页导航条DIV+CSS+JS[代码实例]_经验交流

来源：美好养生网


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


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



  • 热门活动


  • 最新功能


  • 服务承诺


  • 最新成功故事


  • 热贴推荐



    • 子鼠00001
    子鼠00002
    子鼠00003
    子鼠00004
    子鼠00005


    以下是CSS部分：CSS还是没有优化的；
    代码如下:


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

    var k = 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";
    }
    }
    function kijijitag(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支持；

    显示全文