关闭

web 列表切换

标签: cssjavascript
118人阅读 评论(0) 收藏 举报
分类:


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

下载:

点击打开链接

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场