jquery json實現面向對象百度十二星座

阿新 • • 發佈：2018-12-08

height round alt set one com quest 水瓶座 oct

效果：

技術分享圖片

源碼：

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實現面向對象百度十二星座

height round alt set one com quest 水瓶座 oct 效果：源碼： index.html <!DOCTYPE html> <html lang="en"> <head> <meta ch

使用java實現面向對象第六章

首部抽象數據類型集合接口 ddl 強制 tab pad ray 對象第六章集合框架一：接口：即表示集合的抽象數據類型。實現：即集合框架中接口的實現。算法：在一個實現了某個集合框架中的接口的對象身上完成某種有用的計算的方法，例如查找、排序等。 Coll

使用java實現面向對象第一章

所有 java 類方法 spa 實例方法 uname 實例變量 cin 面向對象設計第一章：抽象和封裝一、類是對象的抽象，對象是類的實例二、使用面向對象進行設計面向對象設計的過程就是抽象的過程，分三步來完成： 1.找出它的種類 2.找出它的屬性 3.找出它的

使用java實現面向對象第七章

子類創建線程 sta 定義沒有多線程 void lan start 第七章多線程一.Thread類和Runnable接口 1.在java.lang包中定義了Runnable接口和Thread類。 Runnable接口中只定義了一個方法，它的格式為： pub

使用java實現面向對象第二章

nds str 進行數列是否 wid 繼承關系類的構造函數局部變量第二章繼承一、使用繼承繼承是面向對象的三大特特之一，Java只支持單繼承。繼承表達 is a 的關系。在Java中，所有的Java類都直接或間接的地繼承了Java.lang.object類，

使用java實現面向對象第四章

變量面向接口 public 其他多態 void () 具體實現實例第四章接口一、接口 1.接口可以看作是一種特殊的“抽象類”。 2.接口有比抽象類更好的特性 3.可以被多繼承 4.設計和實現完全分離 5

使用java實現面向對象第五章

nal 實現他會 exce 常見優先級 bug log 信息第五章異常一、異常概述概述：異常是在程序的運行過程中所發生的不正常的事件，他會中斷正在運行的程序二、異常處理 1.關鍵字：try catch finally throw throws 2.Try:把可

js 拖拽實現面向對象

oct utf-8 xhtml bsp AC name java prototype new // JavaScript Document /*構造函數*/ function Drag(id){ this.disX = 0;

使用Java實現面向對象編程——第五章異常

leg 編譯錯誤 bubuko 錯誤信息執行 tcl tin 例如 nal 1、嘗試通過if-else來解決異常問題： Eg： public class Test2 { public static void main(String[] args)

Java如何實現面向對象思想

函數面向對象給定 width cor 元素過程生命傳輸 “在JAVA中，我們所做的所有工作，就是定義類，創建這些類的對象，並傳消息給這些對象” 對於JAVA面向對象思想的學習，依照此理解順序 1、理解面向對象的總體思想與主要特性，例如封裝，繼承，多態，超類，集

封裝計算方法實現面向對象計算器。

override main lse program set todo 一個 ring alc public abstract class Calculator { public double Number1 { get; set; }

Javascript面向對象編程（二）：構造函數的繼承

沒有 cal type 這一今天 nts 實現繼承刪除函數綁定今天要介紹的是，對象之間的"繼承"的五種方法。比如，現在有一個"動物"對象的構造函數。　　function Animal(){ 　　　　this.species = "動物"; 　　} 還有一個

javascript面向對象和原型————呱呱二號

無法訪問原型模式冒充判斷傳遞 pre asp clas 相等面向對象 1、工廠模式 function createObject(name,age){ let obj = new Object(); this.name = name; this.age

面向對象的特征二:繼承性

gpo pos 分享圖片獲取不可 -s info clas image 1.為什麽要有繼承性： 2.通過"class A extends B"類實現類的繼承。 * 子類：A 父類（或基類 SuperClass）：B * * 3.子類繼承父類以後，父

2017級面向對象程序設計——作業二

函數註釋定義程序結構 href course 構造變量命名 lin Deadline：2018-05-06 22:00pm 一、MOOC在線課程學習課程地址：http://www.icourse163.org/course/PKU-1002029030 學習第三周

Javascript面向對象編程（二）：構造函數的繼承作者：yuan一峰

技術分享 share ava 修改 enca end 日期意思生成 Javascript面向對象編程（二）：構造函數的繼承作者：阮一峰日期： 2010年5月23日這個系列的第一部分，主要介紹了如何"封裝"數據和方法，以及如何從原型對象生成實例。

python之面向對象（繼承的實現原理及封裝）

let 基類什麽 isp odi speed utf-8 賦值類名一、繼承的實現原理繼承的順序 class A(object): def test(self): print(‘from A‘) class B(A): def t

面向對象在JavaScript中的接口實現

println 活性循環結構清除 set csdn 構造函數用途耦合度接口是面向對象編程的基礎。它是一組包括了函數型方法的數據結構，與類一樣。都是編程語言中比較抽象的概念。比方生活中的接口。機頂盒。人們利用它來實現收看不同頻道和信號的節目，它宛如對不同類型

Java千百問_05面向對象（005）_接口和抽象類有什麽差別

src ack function 興趣沒有序列面向問題 serial 點擊進入_很多其它_Java千百問 1、接口和抽象類有什麽差別在Java語言中。抽象類abstract class和接口interface是抽象定義的兩種機制。正

Java千百問_05面向對象（008）_java中覆蓋是什麽

返回類變量默認 public -m view ati 面向對象 text 點擊進入_很多其它_Java千百問 1、什麽是覆蓋在java中，覆蓋是針對繼承才有的概念，某一個子類須要某些方法或屬性，但又不想使用父類中的同名的方法或屬性，就須要使

jquery json實現面向對象 百度十二星座

相關推薦

jquery json實現面向對象百度十二星座