JQ实现情人节表白页面

效果图：

表白利页，你值得拥有哦！

代码如下，复制即可使用：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JQ实现情人节表白程序</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>

如果您有更好的方法或更多的功能，可以和我们大家一起分享哦，如有错误，欢迎联系我改正，非常感谢！！！

JQ实现情人节表白程序的更多相关文章

  1. 表白程序源代码，android

    弄了一个表白程序,还是不错的,内容能够自己设置.并附上源代码:http://download.csdn.net/detail/a358763471/7803571 看下效果图吧.是动画的哦...

  2. 零基础入门C/C++实现你的浪漫表白：浪漫流星雨表白程序

    想要讨女朋友欢心也巩固自己所学的知识,各位小伙伴有自己的想法了吗?准备好想要怎样实施了吗?有什么美好的计划了吗?如果没有的话那么别慌,我知道,在座的各位肯定都是有自己的心仪的姑娘,那么今天就教大家一招 ...

  3. c语言表白程序代码

    双十一要到了,好激动啊!!! 是时候准备出手了! 花了一天的时间写的表白代码. 表示自己弱弱的.....   看了网上好多都是js写的,感觉碉堡了!js用的不熟,前端不好,java,Python写起来 ...

  4. 浪漫桃心的Android表白程序

    本文转载于  huachao1001的专栏 几年前,看到过有个牛人用HTML5绘制了浪漫的爱心表白动画.地址在这:浪漫程序员 HTML5爱心表白动画.发现原来程序员也是可以很浪……漫…..的.那么在A ...

  5. PyGame实现情人节表白利器

    前提:写不出那么那个的话哇,随便写写,随便看看,重在代码(文章末尾有免费完整源代码) 实验环境: pygame 1.9.4 pycharm python3.6 实现思路: pygame.display ...

  6. 七夕情人节表白-纯JS实现3D心形+图片旋转

    七夕情人节就快到了,这里献上纯js表白神器-心里都是你,预览: 技术点:css-3d.js-随机色.js-transform 1.html: <div class="heart&quo ...

  7. [转]高端又易学的vbs表白程序了解一下

    第一个. 打开txt文件,复制以下代码粘贴进去(可以修改中文部分,其它代码不要动!).保存并关闭txt文件. msgbox("做我女朋友好吗?") msgbox("房产证 ...

  8. 【Python】表白程序

     程序链接:https://www.lanzous.com/i8xj5mh # 打包操作 # 安装pyinstaller # cmd输入 pip install pyinstaller # shift ...

  9. C语言爱心表白程序

    #include <stdio.h> #include <math.h> #include <windows.h> #include <tchar.h> ...

随机推荐

  1. 解题：JSOI 2008 Blue Mary的战略地图

    题面 这大概不算是从零开始的DP学习系列,这不是最大子矩形吗=.= 定义$dp[x][y][xx][yy]$表示第一张地图中右下角为$(x,y)$,第二张地图中右下角为$(xx,yy)$的最大公共子矩 ...

  2. bzoj 1814: Ural 1519 Formula 1 插头dp经典题

    用的括号序列,听说比较快. 然并不会预处理,只会每回暴力找匹配的括号. #include<iostream> #include<cstdio> #include<cstr ...

  3. loj2541【PKUWC2018】猎人杀

    题解 题目中的选择条件等价于正常选择所有猎人,而如果选到已经出局的猎人就继续选: 这两种选法是一样的因为(设$W=\sum_{i=1}^{n}w_{i}$ , $X$为已经出局的猎人的$w$之和): ...

  4. 【bzoj2795】【Poi2012】A Horrible Poem

    题解: 询问区间的整循环节 设区间长度为$n$ 如果有循环节长为$x$和$y$,那由斐蜀定理得$gcd(x,y)$也一定为一个循环节: 假设最小的循环节长为$mn$,那么对于任何循环节长$x$,一定$ ...

  5. cpplint

    Cpplint是一个Python脚本,作为一款开源免费的代码静态检测工具,Google也使用它作为自己的C++代码检测工具,也就是说,只要你的代码遵从Google C++代码规范,那么Cpplint将 ...

  6. ural 2032 Conspiracy Theory and Rebranding （数学水题）

    ural 2032  Conspiracy Theory and Rebranding 链接:http://acm.timus.ru/problem.aspx?space=1&num=2032 ...

  7. 利用VisualStudio单元测试框架举一个简单的单元测试例子

    本随笔很简单,不涉及mock和stub对象,而是只给出一个简单的利用Visual Studio单元测试框架的最简单例子.如果需要深入理解Unit Test的原理与艺术,请参考<The art o ...

  8. NATS_10：NATS服务配置文件详解

    尽管NATS可以无配置的运行,但也可以使用配置文件配置NATS服务的启动,在实际应用当中,一般都是通过使用配置文件来启动服务的. 1. 配置项包括 客户端监听器端口 Client listening ...

  9. [Web] Web请求过程之二：DNS 域名解析

    一.域名解析过程 1.浏览器检查缓存,域名缓存时间可以通过 TTL 属性来设置. 2.如果浏览器缓存中没有,浏览器会去查找操作系统缓存中是否有这个域名对应的 DNS 解析结果.如果要设置域名对应的 I ...

  10. [转载]ECMA-262 6th Edition / Draft August 24, 2014 Draft ECMAScript Language Specification

    http://people.mozilla.org/~jorendorff/es6-draft.html#sec-23.4 Draft Report Errors and Issues at: htt ...