页面布局方式的切换实例页面（三）

展示

代码

CSS代码：

.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:700px; margin:0; padding:20px 0 0; list-style-type:none;}
.layout li{margin:5px 5px 5px 0; padding:5px; border-bottom:1px dashed #dddddd; zoom:1;}
.layout li img{padding:3px; background-color:white; border:1px solid #beceeb; float:left;}
.layout li img:hover{background-color:#f0f3f9;}
.layout li p{height:160px; margin:0 0 0 215px; color:#666666;}
.newview li{width:210px; float:left;}
.newview li img{float:none; display:block;}
.newview li p{height:auto; margin:6px 0; text-align:center;}
.newview li span{display:none;}
            

HTML代码：

<div>点击后面图形进行布局方式的切换：
    <a href="javascript:void(0);" class="cl on" id="layoutH">
        <span class="h"></span>
    </a>&nbsp;
    <a href="javascript:void(0);" class="cl" id="layoutV">
        <span class="h"></span>
        <span class="v"></span>
    </a>
</div>
<ul id="layoutTarget" class="layout newview">
    <li>
        <a href="#zhangxinxu"><img src="//image.zhangxinxu.com/image/study/p/s200/ps1.jpg" width="200" height="150" /></a>
        <p>
            <a href="#zhangxinxu"><strong>图片1</strong><br /></a>
            <span>这里显示的是对此图片的描述，由于是测试页面，所以对于图片具体的描述内容省略，并且整个列表所有的描述都会显示同样的文字。</span>
        </p>
    </li>
    .
    .
    .
    .
    <li>
        <a href="#zhangxinxu"><img src="//image.zhangxinxu.com/image/study/p/s200/ps6.jpg" width="200" height="150" /></a>
        <p>
            <a href="#zhangxinxu"><strong>图片6</strong><br /></a>
            <span>这里显示的是对此图片的描述，由于是测试页面，所以对于图片具体的描述内容省略，并且整个列表所有的描述都会显示同样的文字。</span>
        </p>
    </li>
</ul>
            

JS代码：

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;
};