效果：

源码：

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

    });

})

图片：

jquery json实现面向对象 百度十二星座的更多相关文章

  1. struts2 + jquery + json 简单的前后台信息交互

    ajax 是一种客户端与服务器端异步请求的交互技术.相比同步请求,大大提高了信息交互的速度和效率.是当下非常实用和流行的技术. 这里简单的说明 struts2 + jquery + json 下的 信 ...

  2. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  3. JQuery + JSON作为前后台数据交换格式实践

    JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为 ...

  4. jQuery: jquery.json.js

    http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...

  5. struts2+jquery+json集成

    以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步 ...

  6. jQuery+JSON+jPlayer实现QQ空间音乐查询

    演示地址: http://bejson.com/demos/qqmusic/ 代码下载:http://www.jqdemo.com/932.html 查询QQ音乐是很早前就出来的一个接口. 这里使用j ...

  7. echart+jquery+json统计TP数据

    由于工作需要,需要统计交易数据的TP50,TP90,TP95,TP99.采用的前端技术是jquery+json+echart. 一.TP定义(谷歌) Calculating TP is very si ...

  8. Struts2+JQuery+Json登陆实例

    Struts2+JQuery+Json登陆实例 博客分类: Struts2   在搭建之前.. 首先,需要准备struts2.0框架的5个核心包, 以及jsonplugin-0.32.jar 以及js ...

  9. 留存： struts2+jquery+json集成

    原文地址:struts2+jquery+json集成 以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: ...

随机推荐

  1. httpwebrequest详解

    HttpWebRequest和HttpWebResponse类是用于发送和接收HTTP数据的最好选择.它们支持一系列有用的属性.这两个类位 于System.Net命名空间,默认情况下这个类对于控制台程 ...

  2. JDeveloper 开发环境配置

    JDeveloper 开发环境配置 程序员的基础教程:菜鸟程序员

  3. Golang之接口（interface）

    Golang最重要的接口,,,, package main import ( "fmt" ) //interface类型默认是指针 /* 接口的实现 Golang中的接口,不需要显 ...

  4. catkin

    catkin  ros https://github.com/dirkholz/pcl_online_viewer rosrun  ???

  5. winnfsd 操作

    # 查看服务端输出了哪些目录,如何挂载 vagrant@homestead:~$ showmount -e 192.168.10.1 Export list for 192.168.10.1: /C/ ...

  6. Spring MVC的handlermapping之请求分发如何找到正确的Handler(RequestMappingHandlerMapping)

    这个思路同样是通过在AbstractHandlerMethodMapping里面来实现getHandlerInternal()实现自己的方法来处理寻找正确的处理器,不懂得请看上一篇. protecte ...

  7. Spring MVC的handlermapping之请求分发如何找到正确的Handler(BeanNameUrlHandlerMapping,SimpleUrlHandlerMapping)

    本文讲的是Spring MVC如何找到正确的handler, 前面请求具体怎么进入到下面的方法,不再细说. 大概就是Spring mvc通过servlet拦截请求,实现doService方法,然后进入 ...

  8. UI7Kit

    [UI7Kit] UI7Kit is a GUI toolkit which can backport flat-style UIKit from iOS7 to iOS5/iOS6. Additio ...

  9. Linux服务器上日志报com.mysql.jdbc.PacketTooBigException: Packet for query is too large (1783 > 1024). You can change this value on the server by setting the max_allowed_packet' variable.

    在做查询数据库操作时,报了以上错误,还有out of memery heap hacp ,原因是MySQL的max_allowed_packet设置过小引起的,我一开始设置的是1M,后来改为了20M ...

  10. 八种主流NoSQL数据库系统对比(转)

    出处:http://database.51cto.com/art/201109/293029.htm 虽然SQL数据库是非常有用的工具,但经历了15年的一支独秀之后垄断即将被打破.这只是时间问题:被迫 ...