作品介绍
查看更多关于 抖音 的文章
很火的卡通H5动态表白源码，搭起来发给你心爱的人向她表白吧
纯html的源码，上传就可以打开使用啦!
用代码编辑器或记事本打开可修改你要表白的内容、名字等
效果图
效果地址：http://luoyujin0511.gitee.io/ta/
部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我喜欢你</title>
<!-- style 懒人源码lanrenzhijia -->
<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>",
"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>
前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
源码获取（可关注↓公众号 ：web前端成长家园获取更多源码 !）
~ 关注我，点赞博文~ 每天带你涨知识!
1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、生活及表白页面等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习，可关注↓公众号 ：[web前端成长家园]获取更多源码 !
更多推荐
表白代码抖音很火的卡通H5动态表白源码HTML+CSS,七夕情人节代码,520代码
发布评论