当前位置 博文首页 > m0_48462648的博客：520超浪漫文艺表白，追求女神必备！！动态Ht
关注作者，点击链接，即可无积分免费下载!!
520表白神器
来一场与众不同的恋爱，
点击图片，会出现动态效果，在右侧会出现信息收集，比如自己的名字，表白的话术以及备注，然后自己表白的名字
源代码：：：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>表白墙-秃头少年郑网</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel='stylesheet prefetch' href="css/a767105f511d4b7da54a47aee07f1e57.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="KraitWall">
<svg class="walls" viewBox="0 0 300 500">
<path id="wallsvg" class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,500 L0,500" />
</svg>
<div class="static">
<div class="static__text"><h2>表白墙</h2><br><span>右滑或单击红色<br>即可打开墙墙<p><br>点击头像即可<br>查看表白内容</p></span></div>
</div>
<script>
$('.walls').on('click', function(event) {
event.preventDefault();
$('.walls-content').addClass('active');
var svg = document.getElementById('wallsvg');
svg.setAttribute('d', 'M0 0 200 0 a0 250 0 1 1 0 500 L0 500');
});
</script>
<div class="walls-content">
<div class="walls-forwall" id="list"></div>
<div class="operation">
<style>
.wall__tag span a:first-child {
display: none;
}
.contact:first-child {
margin-top: 1rem;
}
</style>
<div class="wall__tag"><a href="javascript:;" data-notification-link="cart-overview">我要表白</a></div>
<div class="wall__tag contacts"><a href="javascript:;">声明</a></div>
<div class="wall__tag">
</div>
</div>
</div>
<div class="forwall">
<span class="forwall__back"></span>
<span class="forwall__status">对象人加载中</span>
<div class="forwall__person">
<span class="forwall__online active"></span>
<span class="forwall__name">表白人加载中</span>
</div>
<div class="forwall__messages">
<div class="forloveBar"></div>
<div class="forwallBar"></div>
</div>
</div>
</div>
<div class="notification pos-right pos-top cart-overview" data-notification-link="cart-overview" data-animation="from-right">
<div class="cart-overview__title">
<h5>告白....</h5>
</div>
<form action="" method="post">
<div class="form-group">
<input type="text" id="me" placeholder="我的称呼" class="form-control">
</div>
<div class="form-group">
<input type="text" id="you" placeholder="表白的人" class="form-control">
</div>
<div class="form-group">
<input type="text" id="qq" placeholder="请填写您的QQ" class="form-control">
</div>
<div class="form-group">
<textarea id="content" cols="30" rows="10" placeholder="请填写您的表白内容">我真的很喜欢你!</textarea>
</div>
<div class="form-group">
<input type="button" id="add" class="btn btn-primary form-control" value="表白">
</div>
</form>
<div class="notification-close-cross notification-close"></div>
</div>
<script>
var mr = (function($, window, document) {
"use strict";
var mr = {},
components = {
documentReady: [],
windowLoad: []
};
$(document).ready(documentReady);
$(window).load(windowLoad);
function documentReady(context) {
context = typeof context == typeof undefined ? $ : context;
components.documentReady.forEach(function(component) {
component(context);
});
}
function windowLoad(context) {
context = typeof context == "object" ? $ : context;
components.windowLoad.forEach(function(component) {
component(context);
});
}
mr.setContext = function(contextSelector) {
var context = $;
if (typeof contextSelector !== typeof undefined) {
return function(selector) {
return $(contextSelector).find
