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. shell 变量匹配

    ${var%pattern} ${var%%pattern} ${var#pattern} ${var##pattern} ${var%pattern},${var%%pattern} 从右边开始匹配 ...

  2. composer install 出现的问题

    今天克隆代码之后,在composer install 的时候出现了一些问题,在此记录一下. 错误代码如下: [root@localhost MarketingCenter]# composer ins ...

  3. An internal error occurred during: "Initializing Java Tooling". Eclipse启动发生的错误及解决办法

    1.关闭Eclipse.有时候不关闭eclipse 删除东西会引起其他莫名的错误. 2.删除 当前工作目录文件夹下的 /.metadata/.plugins/org.eclipse.core.reso ...

  4. Kubernetes集群部署--kubernetes1.10.1

    参考博客:https://mritd.me/2018/04/19/set-up-kubernetes-1.10.1-cluster-by-hyperkube/ 一.环境 (1)系统环境 IP 操作系统 ...

  5. Docker Swarm应用--lnmp部署WordPress

    一.简介 目的:使用Docker Swarm 搭建lnmp来部署WordPress 使用Dockerfile构建nginx.php镜像 将构建的镜像上传docker私有仓库 使用volume做work ...

  6. sqlalchemy多外键关联

    一.前言 如果有张表A的多个字段关联另一张表B的一个字段,就如同一个客户表的账单地址和发货地址,同时关联地址表中的id字段. 二.事例 # -*- coding: UTF-8 -*- from sql ...

  7. Linux运维六：用户管理及用户权限设置

    Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号一方面可以帮助系统管理员对使用系统的用户进行 ...

  8. 动态规划：树形DP-景点中心（树的带权重心）

    话说宁波市的中小学生在镇海中学参加计算机程序设计比赛,比赛之余,他们在镇海中学的各个景点参观.镇海中学共有n个景点,每个景点均有若干学生正在参 观.这n个景点以自然数1至n编号,每两个景点的编号均不同 ...

  9. ZeroMQ API（四） 套接字

    1.创建一个套接字 1.1 zmq_socket(3) 1.1.1 名称 zmq_socket - 创建ZMQ套接字 1.1.2 概要 void * zmq_socket(void * context ...

  10. javamail模拟邮箱功能获取邮件内容-中级实战篇【内容|附件下载方法】（javamail API电子邮件实例）

    引言: JavaMail jar包下载地址:http://java.sun.com/products/javamail/downloads/index.html 此篇是紧随上篇文章而封装出来的,阅读本 ...