web 列表切换

原创 2017年01月03日 20:06:38


原理:通过js更改class从而实现切换效果。

html:

<body>
    <div id="box">
        <div class="top">
            <a href="#" title="列表模式" id="btn1" class="btn-list-off"/>
            <a href="#" title="卡片模式" id="btn2" class="btn-card-on"/>
        </div>
        <ul>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
            <li>
                <div class="con">
                    <a href="#" class="a-img">
                        <img src="images/big.jpg" />
                    </a>
                    <p>
                        <a href="#">白杨</a>
                        <span>辽宁</span>
                        <span>21个共同朋友</span>
                    </p>
                    <div class="bottom">
                        未分组的好友
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

css:

*{
    margin: 0;
    padding: 0px;
    list-style: none;
}

a{
    text-decoration: none;
}

#box{
    overflow:hidden;
    width: 550px;
    margin: 0 auto;
    box-shadow: 0 0 5px #aaa;
    border: 1px solid #eee;
}

p a,p span{
    display:block;
    line-height:23px;
    padding-left:10px;
}

#box ul li{
    width: 164px;
    border: 1px solid #aaa;
    box-shadow:0 0 5px #aaa;
    margin: 7px;
}

.a-img{
    width: 164px;
    display: block;
    overflow: hidden;
}

.top{
    height: 40px;
}

.top a{
    height: 16px;
    width: 16px;
    display: block;
    float: right;
    margin: 5px;
}

#box li{
    float:left;
}

.bottom{
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #ccc;
}

.small{
    height: 50px;
    width: 50px;
    float: left;
    margin: 5px;
}

.btn-list-off{background:#fff url(../images/btns.jpg) no-repeat -38px 0px;}
.btn-card-on{background:#fff url(../images/btns.jpg) no-repeat -21px -34px;}
.btn-list-on{background:#fff url(../images/btns.jpg) no-repeat -21px 0px;}
.btn-card-off{background:#fff url(../images/btns.jpg) no-repeat -38px -32px;}

JavaScript:

window.onload=function () {
    var box=document.getElementById("box");
    var btnList = document.getElementById("btn1");
    var btnCard = document.getElementById("btn2");
    var imgs=box.getElementsByTagName("img");

    btnList.onclick=function () {
        btnList.className="btn-list-on";
        btnCard.className="btn-card-off";

        for(var i=0;i<imgs.length;i++){
            imgs[i].src="images/small.jpg";
            imgs[i].parentNode.className="a-img small";
        }
    }

    btnCard.onclick=function () {
        btnList.className="btn-list-off";
        btnCard.className="btn-card-on";

        for(var i=0;i<imgs.length;i++){
            imgs[i].src="images/big.jpg";
            imgs[i].parentNode.className="a-img";
        }
    }
}

下载:

点击打开链接

版权声明:本文为博主原创文章,未经博主允许不得转载。

android列表视图切换:GridView和ListView两种方式来显示一个列表

在安卓应用中,很多带有列表的界面都提供了两种显示方式,单列显示和平铺显示,比如文件管理器,其实这两种视觉效果分别是用listview和GridView来实现的。这篇文章将讨论如何正确的实现两种视图的切...
  • a6136581
  • a6136581
  • 2016年03月21日 10:12
  • 2006

JQuery列表模式大图模式切换

列表模式和大图模式切换将默认列表模式的HTML存储在变量中,从列表模式的HTML动态构造大图模式的HTML内容,存储在变量中$(function() { **动态加载图书分类*...
  • u013020630
  • u013020630
  • 2015年04月25日 21:20
  • 2406

Android中利用ListView和GridView实现列表视图和网格(图标)视图的相互切换显示

想必大家在用电脑上网的时候,都会碰到过,文件的显示方式,一般有列表显示,图标显示,等显示方式。当然,android中也有这种显示方式。今天就来一起实现一下。 首先,说一下,刚开始因为项目...
  • qq_34471736
  • qq_34471736
  • 2017年01月10日 18:44
  • 1409

采用jQuery设计的图片列表tab切换选项卡

  • 2014年11月27日 09:20
  • 106KB
  • 下载

仿淘宝商品列表的切换

  • 2017年06月08日 13:46
  • 9.13MB
  • 下载

labview 列表框项符号切换

  • 2015年03月19日 13:29
  • 17KB
  • 下载

高仿京东商品列表布局切换

  • 2017年04月27日 15:39
  • 19.86MB
  • 下载

Dev GridControl 图片列表及图形化展示切换

  • 2016年12月23日 09:26
  • 23.03MB
  • 下载

Android中利用ListView和GridView实现列表视图和网格(图标)视图的相互切换显示

  • 2017年01月11日 23:39
  • 1.39MB
  • 下载

自绘图片列表,切换模式时滚动条设置无效问题

  • 2017年02月16日 17:53
  • 397KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web 列表切换
举报原因:
原因补充:

(最多只允许输入30个字)