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. 正确理解 LEAL (Load Effective Address) 指令

    LEAL: leal S, D    ->    D ← &S 在 CSAPP (Computer Systems: A Programmer’s Perspective) 中,对 LE ...

  2. Apache+tomcat配置动静分离（一个apache一个tomcat，没有做集群）

    1. 下载apache http server,tomcat,mok_jk.so apache下载地址:http://httpd.apache.org/download.cgi tomcat下载地址: ...

  3. NAT ------ 内网的主机如何通过路由器与外网的主机通信

    内网主机A,路由器B,外网主机C 使用了两个协议: 路由:位于网络层,为数据包提供一个寻径的算法,不改变数据包的源IP和目的IP,但是会修改源MAC和目的MAC,只在同个网段的进行数据的转发 NAT: ...

  4. linux命令总结之ls命令

    ls命令是linux下最常用的命令之一,ls跟dos下的dir命令是一样的都是用来列出目录下的文件,下面我们就来一起看看ls的用法 英文全名:List即列表的意思,当我们学习某种东西的时候要做到知其所 ...

  5. css基础--简单介绍css

    --引入 什么是css? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解 ...

  6. 科学计算三维可视化---TraitsUI（View定义界面）

    View定义界面 使用View来自定义界面 class ModelManager(HasTraits): model_name = Str category = Str model_file = St ...

  7. BFS：八数码问题

    #include <iostream> #include <cstdlib> #include <cstdio> #include <cstring> ...

  8. 容器启动报iptables错误

    # systemctl stop docker # iptables -t nat -F # ifconfig docker0 down # brctl delbr docker0   # 命令由br ...

  9. ELASTIC SEARCH 安装

    elastic search 2017年3月18日 安装&使用 环境 表 1 环境信息 Centos cat /etc/issue CentOS release 6.8 (Final) cat ...

  10. 监控redis数据库应用状态:python,tornado实现

    公司里最近redis服务器压力越来越大,其大概情况,只能从操作系统层面看,并不详尽,故同事在网上找了一个叫做 redis-live的开源项目,我配合部署了一下,还真有点意思,并解决了其中部分小debu ...