<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title>老婆，我爱你</title>
</head>
<script src="js/lib/jquery.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.fireworks.js" type="text/javascript"></script>
<style type="text/css">
*{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; }
html{ width: 100%; height: 100%; }
body{ max-width: 600px; margin: 0 auto; background: #0b3443; color: #f0f0f0;}
.share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; }
.content{ padding: 80px 20px;}
.text_wrapper{ display: -webkit-box; display: flex; }
.text_wrapper .text{ padding-top: 20px; padding-left: 20px; }
.hide{ display: none !important; }
p{ margin: 0; }
.btn-groups{ padding-right: 20px; text-align: center; }
.heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; }
.btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.btn-a{ background: #d26ae5; }
.btn-b{ background: #c9c9c9; }
.btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; }
.btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;}
.container{ }
.container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); }
.container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%，-70%); background: #f3f3f3;}
.container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;}
.confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; }
.type_words{ padding: 12px 20px; }
.centerword{ top: 220px;
color:white;
font-size: 100px;
font-weight: bold;
font-family: cursive; }
@keyframes breath {
0% {
transform: scale3d(1,1,1);
-webkit-transform: scale3d(1,1,1);
transform-origin: 50% 50%;
}
50%{
transform: scale3d(1.02,1.02,1.02);
-webkit-transform: scale3d(1.02,1.02,1.02);
transform-origin: 50% 50%;
}
100%{
transform: scale3d(1,1,1);
-webkit-transform: scale3d(1,1,1);
transform-origin: 50% 50%;
}
}
.IDiv
{
margin:30px;
width:200px;
height:267px;
}
.LDiv
{
margin:30px;
width:267px;
height:200px;
background-color:yellow;
/* Rotate div */
position:absolute;
top: 50px;
left: 50px;
}
</style>
<script type="text/javascript">
$(function() {
$('#yes').click(function(event) {
modal('我就知道老婆您一定不会后悔的。(^_^)', function() {
$('.page_one').addClass('hide');
$('.page_two').removeClass('hide');
typeWrite();
fireworks();
joinlifeimg();
joinRifeimg();
//JoinLImg();
});
});
$('#no').click(function(event) {
modal('明人不说暗话！', A);
});
});
function A() {
modal('我爱你！', B);
}
function B() {
modal('我知道你在等我这一句话', C);
}
function C() {
modal('请您不要拒绝我', D);
}
function D() {
modal('拒绝我，不存在的', E);
}
function E() {
modal('这辈子都不可能让你离开我', F);
}
function F() {
modal('嫁鸡随鸡嫁狗随狗', G);
}
function G() {
modal('我愿与你携手此生', H);
}
function H() {
modal('一起洗衣做饭', I);
}
function I() {
modal('共度春夏秋冬', J)
}
function J() {
modal('再给你一次机会，重新选！', K)
}
function K() {
modal('爱你！', function() {
fireworks();
});
}
function fireworks() {
$('.page_one').addClass('hide');
$('.page_two').removeClass('hide');
$('.page_two').fireworks({
sound: true,
opacity: 0.5,
width: '100%',
height: '100%'
});
}
function modal(content, callback) {
var tpl = '<div class="container">'+
'<div class="mask"></div>'+
'<div class="modal">'+
'<p>'+ content +'</p>'+
'<button type="button" id="confirm" class="confirm">确定</button>'+
'</div>'+
'</div>';
if(content!="爱你！"){
$('body').append(tpl);
$(document).on('click', '.confirm', function() {
$('.container').remove();
callback();
});
}
}
var myWords = '有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。';
//var myWords = '有人说，如春。';
var x = 0;
var y=0;
var speed = 150;
var current = 0;
var l="我爱你,老婆！感恩遇见。";
function typeWrite(){
$('.type_words').html(myWords.substring(0, x++)+'_');
var timer = setTimeout("typeWrite()", speed);
if (x >= myWords.length) {
// x = myWords.length;
$('.page_foot').removeClass('hide');
$('.centerword').html(l.substring(0, y++));
if(y>=l.length){
y=l.length;
clearTimeout(timer);
RandomImg()
}
}
}
var lt=0;
var imgdiv="";
var itop=680;
var deg=-70;
var iLeft=870;
//爱心左半边
function joinlifeimg(){
lt++;
if(lt<8){
deg=deg+3;
let top=itop-50*lt;
let left=iLeft-50*lt;
imgdiv +=' <div class="IDiv" style="position:absolute;top: '+top+'px;left: '+left+'px;transform:rotate('+deg+'deg);-ms-transform:rotate('+deg+'deg);-moz-transform:rotate('+deg+'deg); -webkit-transform:rotate('+deg+'deg); background-image:url(img/I/'+lt+'.jpg);background-size:200px auto;"></div>';
$('.love').html(imgdiv);
}else if(lt>=8&<<22){
let top=0;
let left=0
if(lt<12){
deg=deg+15;
top=itop-50*lt-10;
left=iLeft-50*lt+60*(lt-8);
}else if(lt>11&<<14){
deg=deg+15;
top=itop-50*lt;
left=iLeft-50*lt+60*(lt-8)+20*(lt-11);
}
else{
deg=deg+15;
top=itop-50*lt+60*(lt-14);
left=iLeft-50*lt+60*(lt-8)+20*(lt-11);
}
imgdiv +=' <div class="IDiv" style="position:absolute;top: '+top+'px;left: '+left+'px;transform:rotate('+deg+'deg);-ms-transform:rotate('+deg+'deg);-moz-transform:rotate('+deg+'deg); -webkit-transform:rotate('+deg+'deg); background-image:url(img/I/'+lt+'.jpg);background-size:200px auto;"></div>';
$('.love').html(imgdiv);
}
var timer1 = setTimeout("joinlifeimg()", 500);
if (lt >=22 ) {
clearTimeout(timer1);
huxi()
}
}
var timeout=0;
//爱心呼吸
function huxi(){
timeout++;
if(timeout<=50){
if(timeout%2==0){
$('.love').addClass('hide');
}else{
$('.love').removeClass('hide');
}
}else{
}
var timer1 = setTimeout("huxi()", 200);
if(timeout>=51){
clearTimeout(timer1);
}
}
var Rt=0;
var
使用jquery.fireworks，实现烟花、爱心照片墙、爱心跳动、随机照片墙，可以自定义文字描述
需积分: 5 181 浏览量
2023-05-20
16:49:48
上传
评论 1
收藏 13.42MB RAR 举报
love.rar （63个子文件） 
love love js lib 
jquery.fireworks.js 189KB jquery.min.js 95KB img marry 
2.jpg 247KB 10.jpg 247KB 13.jpg 247KB 14.jpg 247KB 6.jpg 247KB 15.jpg 247KB 16.jpg 247KB 1.jpg 247KB 17.jpg 247KB 12.jpg 247KB 5.jpg 247KB 8.jpg 247KB 20.jpg 247KB 18.jpg 247KB 11.jpg 247KB 19.jpg 247KB 3.jpg 247KB 7.jpg 247KB 9.jpg 247KB 4.jpg 247KB R 2.jpg 247KB 10.jpg 247KB 13.jpg 247KB 14.jpg 247KB 6.jpg 247KB 15.jpg 247KB 16.jpg 247KB 1.jpg 247KB 17.jpg 247KB 12.jpg 247KB 5.jpg 247KB 8.jpg 247KB 20.jpg 247KB 18.jpg 247KB 11.jpg 247KB 19.jpg 247KB 3.jpg 247KB 7.jpg 247KB 9.jpg 247KB 4.jpg 247KB I 2.jpg 247KB 10.jpg 247KB 13.jpg 247KB 14.jpg 247KB 6.jpg 247KB 15.jpg 247KB 16.jpg 247KB 1.jpg 247KB 17.jpg 247KB 12.jpg 247KB 5.jpg 247KB 8.jpg 247KB 20.jpg 247KB 18.jpg 247KB 11.jpg 247KB 19.jpg 247KB 3.jpg 247KB 7.jpg 247KB 9.jpg 247KB 4.jpg 247KB css 
index.html 11KB资源评论
