码迷，mamicode.com
首页 > 其他好文 > 详细

JQ实现情人节表白程序

时间：2018-02-14 13:23:49      阅读：220      评论：0      收藏：0      [点我收藏+]

标签：enter   cti   border   www.   音乐   inline   query   lock   ima   

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

标签：enter   cti   border   www.   音乐   inline   query   lock   ima   

原文地址：https://www.cnblogs.com/yidaixiaohui/p/8447721.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！