jquery json实现面向对象百度十二星座

效果：

源码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度星座</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            line-height: 0;
            visibility: hidden;
        }
        .clearfix{
            zoom: 1;
        }
        ul{
            list-style: none;
        }
        button{
            border: none;
            outline: none;
            cursor: pointer;
        }
        body{
            background: url("img/bg.jpg") no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
        }
        .logo{
            width: 270px;
            margin: 30px auto 0;
        }
        .logo img{
            width: 270px;
            height: 129px;
        }
        .links{
            width: 600px;
            margin: 0px auto;
        }
        .links li{
            float: left;
        }
        .links li a{
            color: #fff;
            padding: 0 10px;
        }
        .search{
            width: 640px;
            margin: 10px auto;
        }
        .search input{
            width: 536px;
            height: 40px;
            border: none;
            outline: none;
        }
        .search button{
            width: 104px;
            height: 40px;
            background-color: #DDD;
        }
        .container{
            width: 888px;
            margin: 40px auto;
        }
        .container .menu{
            float: left;
            width: 80px;
            height: 318px;
            background-color: rgba(0,0,0,.4 );
        }
        .container .menu a{
            display: block;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            width: 80px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }
        .container .menu a.active{
            background-color: #A4A5A7;
        }
        .container .card{
            float: left;
            margin-left: 20px;
            width: 768px;
            height: 278px;
            background-color: rgba(255,255,255,.6);
            padding: 20px 0 20px 20px;
        }
        .container .card li{
            width: 170px;
            height: 50px;
            border: 1px solid #fff;
            float: left;
            margin: 0px 20px 20px 0;
            /*background: url("img/xingzuo.png") no-repeat 0 0;*/
            position: relative;
        }
        .container .card li a{
            display: block;
            width: 100px;
            height: 30px;
            padding: 3px 0 10px 70px;
            text-decoration: none;
            color: #000;
        }
        .container .card li div{
            position: absolute;
            top: -1px;
            right: -1px;
            height: 0;
            width: 30px;
            height: 30px;
            background: url("img/xingzuo.png") no-repeat 0 -624px;
            cursor: pointer;
            display: none;
        }
        .container .card li div.mark{
            display: block;
        }
        .container .card .bottom{
            border-top: 1px solid #fff;
            width: 748px;
        }
        .container .card .bottom button{
            display: block;
            width: 80px;
            height: 30px;
            color: #fff;
            background-color: #389CFF;
            margin: 20px auto;
        }
    </style>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="logo">
    <img src="img/logo_white.png" alt="">
</div>
<div class="links clearfix">
    <ul>
        <li><a href="http://news.baidu.com" target="_blank">新闻</a></li>
        <li><a href="http://www.baidu.com" target="_blank">网页</a></li>
        <li><a href="http://tieba.baidu.com" target="_blank">贴吧</a></li>
        <li><a href="http://zhidao.baidu.com" target="_blank">知道</a></li>
        <li><a href="http://music.baidu.com" target="_blank">音乐</a></li>
        <li><a href="http://image.baidu.com" target="_blank">图片</a></li>
        <li><a href="http://v.baidu.com" target="_blank">视频</a></li>
        <li><a href="http://map.baidu.com" target="_blank">地图</a></li>
        <li><a href="http://baike.baidu.com" target="_blank">百科</a></li>
        <li><a href="http://wenku.baidu.com" target="_blank">文库</a></li>
        <li><a href="http://www.baidu.com/more/" target="_blank">更多&gt;&gt;</a></li>
    </ul>
</div>
<div class="search">
    <input type="text" name="question"><button type="submit">百度一下</button>
</div>
<div class="container">
    <div class="menu">
        <ul>
            <li><a href="javascript:;">导航</a></li>
            <li><a href="javascript:;">音乐</a></li>
            <li><a href="javascript:;">新闻</a></li>
            <li><a href="javascript:;" class="active">星座</a></li>
        </ul>
    </div>
    <div class="card">
        <div class="xingzuo clearfix" id="xz"></div>
        <div class="bottom">
            <button>确定</button>
        </div>
    </div>
</div>
</body>
</html>

index.js

$(function () {
    var datas = [{
        name : "白羊座",
        date : "3.21-4.19"
    },{
        name : "金牛座",
        date : "4.20-5.20"
    },{
        name : "双子座",
        date : "5.21-6.21"
    },{
        name : "巨蟹座",
        date : "6.22-7.22"
    },{
        name : "狮子座",
        date : "7.23-8.22"
    },{
        name : "处女座",
        date : "8.23-9.22"
    },{
        name : "天秤座",
        date : "9.23-10.23"
    },{
        name : "天蝎座",
        date : "10.24-11.22"
    },{
        name : "射手座",
        date : "11.23-12.21"
    },{
        name : "摩羯座",
        date : "12.22-1.19"
    },{
        name : "水瓶座",
        date : "1.20-2.18"
    },{
        name : "双鱼座",
        date : "2.19-3.20"
    }];
    var str = "<ul>";
    for(var i=0;i<datas.length;i++){
        str += "<li>";
        str += "<a href='#'>"+datas[i].name+"<br>"+datas[i].date+"</a>";
        str += "<div></div></li>";
    }
    str += "</ul>";
    $("#xz").html(str);
    $("#xz li").each(function (i) {
        $("#xz li:eq("+i+")").css("background","url('img/xingzuo.png') no-repeat 0 -"+(52*i)+"px");
    })
    $("#xz li").click(function () {
        $(this).children("div").toggleClass("mark");
    });
})

图片：

posted on 2018-12-07 23:18 xxcxxc 阅读(235) 评论(0) 编辑收藏举报

jquery json实现面向对象 百度十二星座

jquery json实现面向对象百度十二星座