抖音很火的动态表白源码，抖音上很火的表白程序，可以自定义图片，文字内容，纯HTML代码，直接上传服务器就能生成表白页面，帮助你快速追到心仪的对象，想要尝试浪漫的互联网表白方式的朋友们不妨试试吧！
<!--代码开源，透明，请勿用于商业用途，完全开源模式，供大家一起探讨研究-->
<!--如有问题（反馈）留言-->
<!--如果可以请在文章底部给个赞赏-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>我喜欢你</title>
<link type="text/css" rel="stylesheet" href="css/theme.css">
<script src="js/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="div_container">
<!-- 最外层div，用于居中兼容PC和移动 -->
<div id="div_start_bg"></div>
<div id="div_onlyyou">
<!-- 用于设置背景 -->
<div id="div_oy_inner">
<!-- 用于存放content -->
<div class="div_oy_text">
<h1></h1>
<img class="img_oy_text" src="">
<p class="p_oy_text"></p>
<ul id="ul_oy_benefit">
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
<li class="li_oy_benefit"></li>
</ul>
</div>
<ul id="ul_oy_btn">
<li onclick="oy_go_next()">Yes ❤</li>
<li onclick="oy_show_benefit()">No ✖</li>
</ul>
<div id="div_oy_note" onclick="oy_hide_note()">
<img src="images/emoji_kelian.jpg" alt=""><br>请告诉我Yes！
<div id="div_oy_note_close">✖</div>
</div>
<div id="div_oy_yes">
<img src="images/emoji_bixin.jpg" alt=""><br>太好了！哈哈~
</div>
</div>
</div>
<div class="div_pure_words">
<div class="div_pure_words_bg">
<div class="div_pure_words_height"></div>
</div>
<div class="div_pw_typed">
<span id="span_pw_typed"></span>
</div>
</div>
<div id="div_btn_container">
<div id="div_btn_inner">
<div class="div_music_tips"></div>
<div class="div_btn" id="div_music" onclick="music_switch()">
<!-- 音乐按钮部分 -->
<img id="img_music" src="images/music_note_big.png" style="-webkit-animation:music_play_rotate 1s linear infinite">
<!-- 您的浏览器不支持播放音乐 -->
<audio id="audio_music" autoplay="autoplay" loop="loop"><source type="audio/mpeg"/></audio>
</div>
<div class="div_record_tips"></div>
<div class="div_btn" id="div_record" onclick="record_switch()">
<audio id="audio_record" loop="loop"><source type="audio/mpeg"/></audio>
</div>
</div>
</div>
</div>
<script>
//判断客户端设备，选择写入meta
function init_viewport() {
if (navigator.userAgent.indexOf('Android') != -1) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;
var phoneScale = parseInt(width) / 500;
document.write('<meta name="viewport" content="width=500, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">');
}
} else if (navigator.userAgent.indexOf('iPhone') != -1) {
var phoneScale = parseInt(window.screen.width) / 500;
document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale + ', maximum-scale=' + phoneScale + ', user-scalable=0" /> '); //0.75 0.82
} else {
document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '); //0.75 0.82
}
}
init_viewport();
var theme = 'pure_words';
console.log('theme ->' + theme);
var theme_content = {
"pure_words_content": "遇见你是我所有美好故事的开始，所以，请别放开我的手，也别缺席我的将来，因为一辈子和你在一起才叫将来<um style='color: #F44336;'>💕</um><um style='color: #F44336;'>💕</um><br/><br/><br/><br/><br/>",
"typed_bool": "typed_y",
"cursor_char": "cursor_heart",
"bg_style_pure_words": "bg_opacity",
"bg_img": "images/3.jpg",
"simple_page_content": "",
"video_page_content": ""
};
console.log(theme_content);
var music_json = {
"music_select": "m_online",
"m_online_id": "7",
"m_online_url": "images/1.mp3",
"m_upload_name": "null",
"m_upload_url": "null"
};
console.log(music_json);
var record_json = {
"record_bool": "r_false",
"r_wechat_time": "null",
"r_wechat_url": "null",
"r_wechat_amr": "null"
};
console.log(record_json);
var main_title = '我喜欢你❤️';
// console.log(main_title);
if (main_title == '' || main_title == 'null') { //允许标题为空
document.title = '慢慢喜欢你';
}
var window_height = $(window).height();
console.log('window_height ->' + window_height);
var pure_words_content = theme_content['pure_words_content'];
var str_cursorChar;
var typed_bool;
var interval_pw_height;
var height_div_pw = $(".div_pure_words_height").height();
function init_pure_words() {
$(".div_pure_words_height").html(pure_words_content + '22222'); //初始化复制内容，撑开文档高度
// 初始化设置div的bg图片 初始化设置div的bg图片
if (typeof(theme_content['bg_style_pure_words']) != 'undefined' && theme_content['bg_style_pure_words'] == 'bg_opacity') {
if (typeof(theme_content['bg_img']) != 'undefined' && theme_content['bg_img'] != '') {
$(".div_pure_words_bg").css({
"background-image": "url(" + theme_content['bg_img'] + ")"
});
}
}
//以下是打字效果的js
if (typeof(theme_content['cursor_char']) != 'undefined' && theme_content['cursor_char'] != '') {
switch (theme_content['cursor_char']) { //设置打字光标的样式
case 'cursor_heart':
str_cursorChar = '<um style="color: #F44336;">❤</um>';
break;
case 'cursor_sub':
str_cursorChar = '_';
break;
case 'cursor_music':
str_cursorChar = '♫';
break;
case 'cursor_star':
str_cursorChar = '★';
break;
case 'cursor_sun':
str_cursorChar = '☀';
break;
default:
str_cursorChar = '|';
}
} else { //处理全新作品，默认显示打字效果
str_cursorChar = '❤';
}
//判断用户有没有选择打字效果
if (typeof(theme_content['typed_bool']) != 'undefined' && theme_content['typed_bool'] != '') {
typed_bool = theme_content['typed_bool'] == 'typed_y' ? true : false;
} else {
typed_bool = false; //默认显示打字效果
}
display_pure_words();
$(".div_pure_words").fadeIn();
interval_pw_height = setInterval(function() {
console.log('div_pure_words_height -> ' + $('.div_pure_words_height').height());
var least_height_div_pw = $('.div_pure_words_height').height();
if (least_height_div_pw > height_div_pw) {
height_div_pw = least_height_div_pw;
} else {
clearInterval(interval_pw_height);
$(".div_pure_words_height").height(least_height_div_pw + 100);
if ($(".div_pure_words_height").height() < window_height) {
$(".div_pure_words_height").height(window_height); //不能小于窗口的高度
console.log('let us be high as window');
}
}
}, 100);
}
function display_pure_words() {
if (typed_bool) {
var typed_pure_words = new Typed('#span_pw_typed', {
strings: [pure_words_content],
//输入内容, 支持html标签
typeSpeed: 120,
//打字速度
cursorChar: str_cursorChar,
//替换光标的样式
contentType: 'html',
//值为html时，将打印的文本标签直接解析html标签
onComplete: function(abc) {
// console.log(abc);
console.log('finished typing words');
// console.log($('#span_pw_typed').height()-$(".div_pure_words_height").height());
},
});
} else {
//如果不需要打字效果就直接显示
$("#span_pw_typed").html(pure_words_content).fadeIn();
}
init_attachment();
}
var start_content = {
chase_title: "做我女朋友好不好<um style='color: #F44336;'>💕</um>",
chase_text: "承蒙你的出现，够我喜欢好多年，我希望，以后你能用我的名字拒绝所有人<um style='color: #F44336;'>💕</um>",
chase_benefit: ["你是我拔掉氧气罐都想吻的人", "你是我跑完8000米还想拥抱的人", "你是我自罚三杯都不肯开口的秘密", "你是我赴汤蹈火都不肯放下的执着", "你是我电量只剩1%也想回信息的人", "你是我穷极一生不想醒来的梦"],
bg_style: "bg_custom",
bg_img: "images/2.jpg",
img_bool: "img_true",
img_src: "images/1.gif"
}; //可能为null
console.log(start_content);
var start_id;
$(function() {
//此事件为触发互动创意
start_id = 'onlyyou'; //可能为null
init_start(start_id);
});
function init_start(start_id) {
console.log('init_start ->' + start_id);
switch (start_id) {
case 'loveformat':
$('.div_loveformat').show();
init_loveformat();
break;
case 'hearttree':
$('#div_hearttree').show();
init_hearttree();
break;
case 'courage':
$('#div_courage').show();
init_courage();
break;
case 'birthdaycake':
$('#div_dbcake').show();
init_birthdaycake();
break;
case 'intersect':
$('#div_intersect').show();
init_intersect();
break;
case 'onlyyou':
$('#div_onlyyou').show();
init_onlyyou();
break;
default:
init_theme();
}
}
//开始动画主体部分
function init_theme() {
console.log('init_theme');
$('#div_start_bg').fadeOut();
init_pure_words();
}
var attachment = 'null'; //可能为null
var attached_content = {
"bool_save": false
}; //可能为null
console.log(attached_content);
function init_attachment() { //开始attachment
console.log('init_attachment ->' + attachment);
switch (attachment) {
case 'timer':
init_at_timer();
break;
default:
return;
}
}
</script>
<!-- JQuery -->
<script src="js/typed.min.js"></script>
<script src="js/start_onlyyou.js"></script>
<script src="js/jweixin-1.2.0.js"></script>
<script src='js/theme_common.js'></script>
</body>
</html>
演示地址 （已失效）
祝大家早日脱单！
扫一扫
45万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
