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. html视频背景

    视频作为网页背景的限制因素 在动手编码实现前,视频作为网页背景的有些问题我们要先考虑清楚: 并不是因为技术上可行你就可以任意使用:作为背景的视频内容必须能增强页面内容的感染力,而不是因为漂亮或技术上很 ...

  2. Chapter5 (语句） --C++Prime笔记

    1.指用是一个只含有一个单独的分号的语句. 什么时候用到:语法上需要一条语句但是逻辑上不需要. 2.复合语句是指用花括号括起来的语句和声明的序列,又被称为块. 3.悬垂else :规定else与离它最 ...

  3. CSS--overflow和hover

    一.Overflow overflow 属性规定当内容溢出元素框时发生的事情. 当插入的一张图片大小超过了元素本身大小,就会将元素撑大 <!DOCTYPE html> <html l ...

  4. mysql 同步数据到 ElasticSearch 的方案

    MySQL Binlog 要通过 MySQL binlog 将 MySQL 的数据同步给 ES, 我们只能使用 row 模式的 binlog.如果使用 statement 或者 mixed forma ...

  5. P3130 [USACO15DEC]计数haybalesCounting Haybales

    P3130 [USACO15DEC]计数haybalesCounting Haybales 1)给定一段连续的田地,给每一个田地都增加一些新的草包. 2)给定一段连续的田地,找出草包最少的田地有多少草 ...

  6. Hadoop生态圈-phoenix完全分布式部署以及常用命令介绍

    Hadoop生态圈-phoenix完全分布式部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. phoenix只是一个插件,我们可以用hive给hbase套上一个JDBC壳,但是你 ...

  7. gitlab的备份与恢复与迁移

    一.gitlab的备份1.1 创建备份目录,并授权 1 2 3 4 [root@linux-node1 ~]# mkdir /data/backups/gitlab -p [root@linux-no ...

  8. getContentLength() 指为 -1 的解决办法

    在这个坑里3个多小时啊.这里不得不抱怨下,国内的资料坑爹,全部copy不说,还是错的. 解决办法: 在服务端加入代码: File file = new File(path); //path为要下载的文 ...

  9. Elasticsearch相关概念了解

    mysql ⇒数据库databases       ⇒表tables     ⇒ 行rows        ⇒ 列columns es   ⇒索引indices        ⇒ 类型types    ...

  10. H5页面中唤起native app

    现在各类app,分享出去的H5页面中,一般都会带着一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载.这是一个很正常的推广和导流量的策略,最近产品经理就提 ...