【至臻】低配微信拍一拍
<!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>
