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. Android Studio自动生成UML关系类图

    android studio 根据源码自动生成UML的插件介绍http://www.jianshu.com/p/cbccd831cf01 simpleumlhttps://plugins.jetbra ...

  2. RF - selenium - 常用关键字

    1. 打开浏览器 Open Browser    htpp://www.testclass.net    chrome 2. 关闭浏览器 Close Browsers Close All Browse ...

  3. 实用 zsh 插件

    zsh 命令补全插件 zsh-users/zsh-autosuggestions laravel5(使用前提:安装了 oh-my-zsh) 使用方法,修改 ~/.zshrc,在 plugins 里面加 ...

  4. js基础之DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

  5. SQL Server 2012安装图解

    SQL Server 2012 Enterprise Edition安装图解... 第一部分:安装前的准备 1.疑问:一个PC上可以安装多个SQL Server数据库么 答案:可以的.每一个安装的时候 ...

  6. 用Anaconda安装本地python包

    Anaconda确实带来了很多方便,但是之前也过多的依赖了conda自带的一键下载python包的功能.这不,这几天突然要用FastFM这个包,无奈conda里没有,于是只能从github下载下来,实 ...

  7. P1993 小K的农场 && 差分约束

    首先第一篇讨论的是差分约束系统解的存在 差分约束系统是有 \(n\) 个变量及 \(m\) 个(如 \(x_{i} - x_{j} \leq a_{k}\) )关系组成的系统 差分约束解的求解可以转化 ...

  8. RabbitMQ基础介绍

    非原创,仅作为个人的学习资料,转自 anzhsoft http://blog.csdn.net/anzhsoft/article/details/19563091, 1. 历史 RabbitMQ是一个 ...

  9. webpack+vue+iview使用vue-cli脚手架搭建

    1.安装nodejs环境 下载node.js.安装成功后再控制台输入 node -v 出现版本号则,安装成功. 如果没有出现 版本号 而是出现node 不是内部命令的话 需要配置一下环境变量,如果已经 ...

  10. Java RMI 简单实现

    提供远端访问的时候,我们首先需要定义远端能够访问哪些东西,在Java中,定义这类接口需要实现Remote接口 public interface Business extends Remote{ pub ...