H5实战(七)：列表布局切换

来源：互联网发布：javaweb高级编程怎样编辑：程序博客网时间：2024/04/29 07:51

1.目标效果

实现信息列表的平铺布局与列表布局的切换效果。

2.实现思路

1）写出信息列表与切换按钮，切换按钮可使用正方形中间插入span的白条而形成两种不同的按钮。

2）为两种不同布局设置样式，一种是列表形式，另一种为平铺方式，可设定每个li宽度并向左浮动而形成。

3）为没有被选中的按钮添加类，当点击事件发生时，判断若是此类，则切换布局（即将列表部分的类名改变）。

3.代码实现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>列表切换</title>    <style>        .cl{display:inline-block; width:12px; height:12px; background:#34538b; font-size:0;}        .cl.on{background:#a0b3d6;}.cl.on:hover{background:#486aaa;}        .h{height:2px; width:12px; background:white; position:absolute; margin-top:5px;}        .v{width:2px; height:12px; background:white; position:absolute; margin-left:5px;}        .layout{width:600px; margin:0; padding:0; list-style-type:none;}        .layout li{margin:5px 5px 5px 0; padding:5px; background:#f0f3f9;}        .newview li{width:280px; float:left;}    </style></head><body><div>点击后面图形进行布局方式的切换：    <a href="#" class="cl" id="layoutH">        <span class="h"></span>    </a>     <a href="#" class="cl on" id="layoutV">        <span class="h"></span>        <span class="v"></span>    </a></div><ul id="layoutTarget" class="layout">    <li><strong>1. </strong>平铺显示与列表显示布局的转换，具体实现方式描述</li>    <li><strong>2. </strong>平铺显示与列表显示布局的转换，具体实现方式描述</li>    <li><strong>3. </strong>平铺显示与列表显示布局的转换，具体实现方式描述</li>    <li><strong>4. </strong>平铺显示与列表显示布局的转换，具体实现方式描述</li></ul><script>    var obj = {        t: document.getElementById("layoutTarget"),        h: document.getElementById("layoutH"),        v: document.getElementById("layoutV")    };    obj.h.onclick = function(){//判断当前布局        if(this.className === "cl on"){//当前非此布局，进行切换            obj.t.className = "layout";            this.className = "cl";            obj.v.className = "cl on";        }        return false;    };    obj.v.onclick = function(){//判断当前布局        if(this.className === "cl on"){//当前非此布局，进行切换            obj.t.className = "layout newview";            this.className = "cl";            obj.h.className = "cl on";        }        return false;    };</script></body></html>

4.最终效果

阅读全文

0 0