JQ实现情人节表白程序
生活随笔
收集整理的這篇文章主要介紹了
JQ实现情人节表白程序
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?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>?如果您有更好的方法或更多的功能，可以和我們大家一起分享哦，如有錯誤，歡迎聯系我改正，非常感謝！！！
更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的JQ实现情人节表白程序的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS实现逼真的雪花飘落特效
- 下一篇： 作用域、执行环境、闭包（四）