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

下载:

点击打开链接

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

相关文章推荐

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

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

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

android列表视图切换:GridView和ListView两种方式来显示一个列表 http://www.jcodecraeer.com/a/anzhuokaifa/androidkaif...

HTC Vive VR房产项目开发五(通过材质列表切换地板材质)

一、搭建界面 1、在地板Floor1下创建一个canvas,重命名为FloorMatList,并添加脚本VRTK_UI Canvas,用于与UI进行交互 2、创建一个Panel,并且重命名为Mat...

仿淘宝列表、网格布局之间的切换

  • 2016年10月04日 18:35
  • 26.37MB
  • 下载

Activity 切换动画(小米图库列表进入详情页,图片从固定位置放大进入,缩小退出)

直接上效果图 ok,来分析下如何实现的吧分析原理首先确定,这是两个不同的 Activity,从图片列表页跳入到图片详情页;先来看进入详情页时的动画,从列表中所在 item 的位置一直放大到详情页的显...
  • jxxfzgy
  • jxxfzgy
  • 2015年03月21日 13:44
  • 4952

C#版QQ的列表切换界面

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

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