Html
    Css
    Js

    
                        
@charset "utf-8";
	/* CSS Document */

* {
	font-family:helvetica;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	border:0;
	margin:0;
	padding:0;
}
input::-webkit-input-placeholder {
	color:#ccc;
	font-size:14px;
}
input:-ms-input-placeholder {
	// IE10+
    color:#ccc;
	font-size:14px;
}
input:-moz-placeholder {
	// Firefox4-18
    color:#ccc;
	font-size:14px;
}
input::-moz-placeholder {
	// Firefox19+
    color:#ccc;
	font-size:14px;
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
	color:#333;
}
input {
	border:1px solid #ccc;
}
p {
	margin:0;
}
.title {
	position:absolute;
	display:block;
	width:100%;
	padding:0;
	margin:0 -.5rem;
	font-size:.85rem;
	font-weight:500;
	line-height:2.2rem;
	color:#3d4145;
	text-align:center;
	white-space:nowrap;
	left:0;
	top:0;
}
.bar .icon {
	position:relative;
	z-index:20;
	padding:.5rem .1rem;
	font-size:1rem;
	line-height:1.2rem;
}
a:active {
	color:#0a8ddf;
}
a:active,a:hover {
	outline:0;
}
.pull-right {
	float:right;
}
.icon {
	font-family:iconfont-sm!important;
	font-style:normal;
	-webkit-font-smoothing:antialiased;
	-webkit-text-stroke-width:.2px;
	-moz-osx-font-smoothing:grayscale;
}
.page {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background:#efeff4;
}
.bar-nav {
	top:0;
}
.bar {
	position:absolute;
	right:0;
	left:0;
	z-index:10;
	height:2.2rem;
	padding-right:.5rem;
	padding-left:.5rem;
	background-color:#f7f7f8;
	border-bottom:1px solid #e7e7e7;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.bar-tab {
	bottom:0;
	z-index:9000;
	width:100%;
	height:2.5rem;
	padding:0;
	table-layout:fixed;
	border-top:1px solid #e7e7e7;
	border-bottom:0;
	border-left:0;
	-webkit-transition-duration:.4s;
	-o-transition-duration:.4s;
	transition-duration:.4s;
}
.talk_record {
	position:absolute;
	top:2.2rem;
	width:100%;
	height:89%;
	/*background:#eff0f2;
	*/
	background:white;
	overflow-y:scroll;
}
.talk_recordboxme {
	/*border:1px solid #ccc;
	*/
    display:block;
	color:#afafaf;
	padding:5px 0px 5px 0px;
	overflow:hidden;
	margin:5px;
}
.talk_recordbox {
	/*border:1px solid #ccc;
	*/
    display:block;
	color:#afafaf;
	/*padding:5px 10px 5px 10px;
	*/
    overflow:hidden;
	margin:5px;
}
.talk_recordboxme .user {
	background:#a6d4f2;
	float:right;
	margin:0 2px 0px 2px;
	font-size:12px;
	line-height:20px;
	text-align:center;
	display:inline;
	padding:5px 12px;
	border-radius:15px;
	color:#333;
}
.talk_recordbox .user {
	background:#dbd8d5;
	float:left;
	margin:0 2px 0px 2px;
	font-size:12px;
	line-height:20px;
	text-align:center;
	display:inline;
	padding:5px 12px;
	border-radius:15px;
	color:#333;
}
.talk_recordboxme .talk_recordtext {
	float:right;
	/*background:white;
	*/
	background:#a6d4f2;
	padding:12px 12px;
	border-radius:15px;
	margin-right:20px;
	max-width:185px;
}
.talk_recordbox .talk_recordtext {
	float:left;
	background:#dbd8d5;
	padding:12px 12px;
	border-radius:15px;
	margin-left:20px;
	max-width:185px;
}
.talk_recordtext > p {
	font-size:13px;
	color:#333;
	font-family:helvetica;
}
.talk_recordtext > span {
	font-size:12px;
	color:#333;
}
.talk_recordtext {
	position:relative;
}
.talk_recordboxme .talk_recordtextbg {
	position:relative;
	float:right;
}
.talk_recordboxme .talk_recordtextbg {
	width:0;
	height:0;
	border:solid #ccc;
	/*border-width:1px 15px 9px 18px;
	*/
    border-width:1px 18px 9px 15px;
	border-color:transparent transparent transparent #a6d4f2;
	position:absolute;
	top:10px;
	right:-28px;
}
/*.talk_recordbox .talk_recordtextbg {
	position:relative;
	float:right;
}
*/
.talk_recordbox .talk_recordtextbg {
	width:0;
	height:0;
	border:solid #ccc;
	/*border-width:15px 2px 15px 15px;
	*/
	border-width:1px 15px 9px 18px;
	border-color:transparent #dbd8d5 transparent transparent;
	position:absolute;
	top:10px;
	left:-28px;
}
/*输入键盘*/
.page #send-btn[disabled] {
	background:#ccc;
	color:white;
}
#textInput {
	display:block;
	float:left;
	width:10rem;
	height:1.8rem;
	margin-top:0.34rem;
	margin-left:1rem;
}
#picture-btn {
	display:block;
	float:left;
	width:1.8rem;
	height:1.4rem;
	margin-top:0.40rem;
	margin-left:1.6rem;
	background:#f7f7f8;
}
#send-btn {
	display:block;
	float:left;
	width:2.5rem;
	height:1.5rem;
	line-height:1.5rem;
	margin-top:0.50rem;
	margin-left:1.2rem;
	background:#f7f7f8;
	border:1px solid #ccc;
	font-size:13px;
	border-radius:.4rem;
}
#speak-btn {
	display:block;
	float:left;
	width:1.8rem;
	height:1.4rem;
	margin-top:0.40rem;
	margin-left:1.7rem;
	background:#f7f7f8;
}
#picture-btn span,#speak-btn span {
	font-size:24px;
	line-height:27px;
}
.talk_recordtext p {
	word-wrap:break-word;
}
.voice-case {
	margin-top:2.2rem;
	width:100%;
}
.voice-content {
	width:100%;
	height:14.4rem;
}
.voice-content img {
	width:100%;
	height:100%;
}
.button-case {
	position:relative;
	width:33.3%;
	float:left;
	height:100%;
	text-align:center;
}
.sendVoice-btn {
	background:white;
	border:1px solid #ccc;
	width:58px;
	height:58px;
	border-radius:29px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-29px;
	margin-top:-29px;
}
.voice-case {
	display:none;
}
.speakVoice-btn {
	background:white;
	border:1px solid #ccc;
	width:84px;
	height:84px;
	border-radius:42px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-42px;
	margin-top:-42px;
	background:red;
}
.button-case .speakVoice-btn span.fa {
	color:red;
}
.resetVoice-btn {
	background:white;
	border:1px solid #ccc;
	width:58px;
	height:58px;
	border-radius:29px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-29px;
	margin-top:-29px;
}
#speakVoice-end {
	background:white;
}
#speakVoice-end span.fa {
	color:red!important;
}
.button-case button:nth-child(2) span.fa {
	color:#666;
	font-size:1rem;
	margin-top:5px;
}
.button-case span {
	color:#2196f3;
}
.button-case button:nth-child(2) {
	display:none;
}
#speakVoice-disabled span.fa-circle {
	color:red;
}
.sendVoice-disabled span.fa-circle {
	color:#ccc;
}
#resetVoice-disabled span.fa-circle {
	color:#ccc;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

仿qq聊天消息发送

单方面的消息发送,适合移动端消息推送,兼容ie,欢迎大家下载

3
      车宝强-沈阳蓝桥0
      2018/7/23 16:16:23
      三叶草0
      2018/6/7 13:03:25
      嗡嗡嗡
          医路相随0
          2018/10/16 20:27:09
          5555
      回复