web 列表切换

2017-01-04 08:25:14来源:CSDN作者:goulei2010人点击


原理:通过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";        }    }}

下载:

点击打开链接

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台