哈哈，七夕來了，快拿去表白吧

原創 michaelmiss 2020-06-15 12:59 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery表白牆</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
	margin:0;
	padding:0px;
	background-color:#2C3437;
}
.content {
	display:inline-block;
	width:350px;
	height:400px;
	padding-top:70px;
	margin-right:5px;
	margin-left:5px;
}
div>div>div {
	display:block;
	height:20px;
}
div>div>div>div {
	width:16px;
	height:16px;
	background-color:#ff00d8;
	display:inline-block;
	float:left;
	margin:2px;
}
div>div.content1>div>div.fl {
	background-color:#ff0033;
}
div>div.content2>div>div.fl {
	background-color:#006699;
}
div>div.content3>div>div.fl {
	background-color:#ffff33;
}
</style>
</head>
<body>
<div style="width: 1100px; margin: auto;">
    <p style="font-size: 40px; color: #f75fe0;text-align: center;">
        <span>老</span><span>婆</span>
    </p>
    <p style="font-size: 22px; color: #f75fe0;text-align: center;">
        <span>如</span>
        <span>果</span>
        <span>每</span>
        <span>個</span>
        <span>人</span>
        <span>一</span>
        <span>生</span>
        <span>只</span>
        <span>會</span>
        <span>遇</span>
        <span>到</span>
        <span>一</span>
        <span>顆</span>
        <span>流</span>
        <span>星</span>
        <span>，</span>
        <span>那</span>
        <span>麼</span>
        <span>和</span>
        <span>你</span>
        <span>在</span>
        <span>一</span>
        <span>起</span>
        <span>就</span>
        <span>是</span>
        <span>我</span>
        <span>惟</span>
        <span>一</span>
        <span>的</span>
        <span>願</span>
        <span>望</span>
        <span>！</span>
    </p>
    <div class="content content1">
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
    </div>

    <div class="content content2">
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl" style="margin-left:262px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
    </div>



    <div class="content content3">
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>

        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl" style="margin-left: 222px;"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
        <div style="margin-left:20px;">
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
            <div class="fl"></div>
        </div>
    </div>

    <a id="bofang" style="background: #f75fe0; color:#fff; border-radius:5px;width:140px;height:40px;text-align: center;display:inline-block;margin-left:400px; line-height: 40px; cursor: pointer;opacity: 0;">
		點擊再看一次
	</a>

    <a id="audio_btn" style="background: #f75fe0; color:#fff; border-radius:5px;width:140px;height:40px;text-align: center;display:inline-block;line-height: 40px; cursor: pointer;opacity: 0;">
		點擊關閉背景音樂
	</a>

</div>
<audio id="music" autoplay="autoplay" loop="loop" preload="auto" src="http://www.xyptz.cn/aini.mp3">
</audio><script>
$(document).ready(function() {
    animate();
});

function animate() {
    $('div>div>div>div').each(function() {
        $(this).css({
            position: 'relative',
            top: '-400px',
            opacity: 0
        });
        var wait = Math.floor((Math.random() * 3000) + 1);
        $(this).delay(wait).animate({
            top: '0px',
            opacity: 1
        }, 2000, function() {
            $(this).delay(wait).animate({
                top: '50px',
                opacity: 0
            }, 1000, function() {
                $(this).delay(wait).animate({
                    top: '0px',
                    opacity: 1
                }, 500);


            });
        });
    });
    $('span').each(function() {
        $(this).css({
            position: 'relative',
            top: '-200px',
            opacity: 0
        });
        var wait = Math.floor((Math.random() * 3000) + 1);
        $(this).delay(wait).animate({
            top: '0px',
            opacity: 1
        }, 2000, function() {
            $(this).delay(wait).animate({
                top: '50px',
                opacity: 0
            }, 1000, function() {
                $(this).delay(wait).animate({
                    top: '0px',
                    opacity: 1
                }, 500);
            });
        });
    });
}

setTimeout(function() {
    $("a").css({
        position: 'relative',
        left: '-400px',
        opacity: 0
    });
    $("a").animate({
        left: '0px',
        opacity: 1
    }, 2000);
}, 5000)
$("#bofang").click(function() {
    animate();
});



$("#audio_btn").click(function() {
    var music = document.getElementById("music");
    if (music.paused) {
        music.play();
        $("#audio_btn").html("點擊關閉背景音樂");
    } else {
        music.pause();
        $("#audio_btn").html("點擊播放背景音樂");
    }
});</script>
</body>
</html>

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

children和childNodes的區別

children 獲取當前元素的子節點元素（不包含文本元素） childNodes 獲取當前元素的子節點元素（包含文本元素） 有的時候不一定有children屬性 爲了兼容可以把childNodes中的元素過濾出來 functio

ynd_sg 2020-07-08 09:20:23

HTML+CSS相對寬度和絕對寬度衝突時的div解決方法

相對寬度和絕對寬度衝突時的div解決方法 摘要：一般我們在使用絕對寬度時會使用px，相對寬度時會使用%，但是要是同時使用絕對寬度和相對寬度時該怎麼辦呢？ 我們通過一道例題來講解今天的內容： 1.完成圖片上的題目要求 2.嘗試提

Super_Tiger_Lee 2020-07-07 17:52:15

發送http請求過程所經歷的階段

先上一張圖給大家看看 http請求流程圖 相信看完這張圖後大家對一次請求也有了大致的瞭解了，當前其中還有很多細節小編沒有畫出來，然後我們來看看部分過程的細節 所以其流程大致如下： 1：DNS解析域名得到IP地址 2：客戶端

沐春风这个名 2020-07-06 05:01:24

怎麼對阿里iconfont兩個項目中的字體圖標合併

1.把下載下來的2個文件夾都放入項目中 2.如要把iconfont2文件夾中的字體圖標合併到iconfont文件夾中,則如下圖，修改iconfon2文件夾下左側該圖標的五個文件名，同時修改這個文件夾中iconfont.css中@fon

weixin_38203203 2020-07-05 12:49:29

多行文本文本輸入框 textarea 可點擊任意地方輸入文字而不是隻能在開頭輸入的問題

   問題如圖:textarea可以點擊任意地方編輯 原因:textarea標籤之前有空隙 改成下圖這樣就可以了:

weixin_38203203 2020-07-05 12:49:19

字體小圖標使用與優缺點

之前對換膚就是改變css與img中的路徑來進行切換，但是效果與打包後的文件都不理想。使用字體小圖標只要改變CSS中的font-size和color就可以。 現結合其他資料對其進行小總結下： 優勢 輕量級：一個圖標字體要比一系列的圖

零零历险记 2020-07-04 22:36:40

前端配色

常用色彩 【優設網】中國傳統色彩 【優設網】日本傳統色彩 【中國色】中國傳統色彩 【百圖匯】顏色表大全 【oschina在線工具】RGB顏色常用對照表 配色方案 【小影的工具箱】配色表 【COOLORS】配色工具 色彩工具

Cookie_fzx 2020-07-04 01:52:50

10個新鮮的CSS3文本效果製作與Web排版教程推薦

在CSS3中變化重大的一項便是與Web排版相關的技術。現在我們不需要使用任何JavaScript或圖片即可實現豐富的文本樣式效果。本文收集了10個非常實用的CSS3 文本效果製作與Web排版教程，希望你會喜歡。 1. Create Att

Gloria_bing 2020-07-03 13:21:50

用css寫六邊形

div佈局<div class="box1"></div><div class="box3"></div><div class="box2"></div>css.box1{            width: 58px;         

皖月擎空 2020-07-01 23:09:06

video 標籤 autoplay標籤 不管用

抚琴之泪 2020-06-30 06:13:53

居中顯示and自適應佈局

一、水平居中div 給div設置一個寬度，然後添加margin:0 auto屬性 div{ width:600px; margin:0 auto; } 設置塊級元素的 width 可以阻止它從左到右撐滿容器。然後你就

Crazier_qi 2020-06-28 07:25:27

js實現頁面複選框checkbox記憶功能

需求：在頁面中複選框點擊選中後，頁面刷新或者關閉重新打開，選中的複選框依然是選中狀態 開發思路：建立一個數組存放被選中的checkbox的id，將數組放到cookie中存儲，複選框選中則往數組中加一個id，取消選中則從數據中刪除該id,頁

sdjzping 2020-06-27 14:37:45

padding小技巧

<button id="btn"></button> <lable for="btn">按鈕</lable> lable{     display:inline-block;     line-height:20px;     paddi

baidu_41736913 2020-06-27 07:52:40

getElementById getElementsByName getElementsByTagName的用法

1.getElementById 語法：document.getElementById(id) 參數：id爲String 返回值：對象；返回此id的第一個對象，否則，爲null 如： <input type=text  id=text>

hero5460 2020-06-27 00:07:41

WebStrom12 怎樣改變左邊目錄欄顏色

打開WebStrom, 點擊 file–>Settings(或ctrl+alt+s) 點擊Appearance & Behavior 3.點擊 File Color 4.點擊Color右邊的’+’, Scope爲你想讓哪部

MyDilrabaSister 2020-06-26 02:54:59