【至臻】低配微信拍一拍
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wechat {
width: 360px;
height: 640px;
margin: 20px 0 0 560px;
background: #edeaee;
}
.header {
height: 50px;
background: #322f33;
color: #e9e6ea;
line-height: 50px;
font-size: 18px;
}
.header-horn {
display: inline-block;
border-top: 2px solid #e9e6ea;
border-left: 2px solid #e9e6ea;
width: 12px;
height: 12px;
margin-left: 20px;
transform: rotate(-45deg);
}
.content {
padding: 12px 6px 0 6px;
}
.message-box {
display: flex;
margin-bottom: 12px;
}
.head {
height: 45px;
width: 45px;
background: red;
}
.message {
background: #fffeff;
margin-top: 4px;
height: 40px;
line-height: 40px;
padding: 0 12px;
font-size: 16px;
position: relative;
border-radius: 6px;
}
.other .message {
margin-left: 8px;
}
.message:before {
content: "";
width: 6px;
height: 6px;
background: #fffeff;
position: absolute;
border-top: 2px solid #e9e6ea;
border-left: 2px solid #e9e6ea;
top: 16px;
}
.other .message:before {
transform: rotate(-45deg);
left: -5px;
}
.self {
flex-direction:row-reverse
}
.self .head {
background: blue;
}
.self .message {
margin-right: 8px;
}
.self .message:before {
right: -5px;
transform: rotate(135deg);
}
.message-tip {
font-size: 12px;
color: #b4b4b4;
text-align: center;
margin: 0 auto 12px;
}
</style>
</head>
<body>
<div class="wechat">
<div class="header">
<span class="header-horn"></span>
<span class="header-name"></span>
</div>
<div class="content">
<div class="message-box other">
<div class="head"></div>
<div class="message">hello,你好。</div>
</div>
<div class="message-box self">
<div class="head"></div>
<div class="message">hello,你好。</div>
</div>
</div>
</div>
</body>
</html>
<script>
var nameStr = '自己的肩膀';
var content = document.getElementsByClassName('content')[0];
var other = document.getElementsByClassName('other');
var self = document.getElementsByClassName('self');
var userName = document.getElementsByClassName('header-name')[0];
userName.innerHTML = nameStr;
function addEvent(domArr, name) {
for(var i = 0; i < domArr.length; i++) {
domArr[i].ondblclick = function() {
var divDom = document.createElement('div');
divDom.className = 'message-tip';
divDom.innerHTML = '你拍了拍"'+ name +'"';
content.appendChild(divDom);
}
}
}
addEvent(other, nameStr);
addEvent(self, '自己');
</script>
