chatroom聊天室

浏览：2047次- 评论：3次- 发布时间：2017-08-29

Html

Css


    
        
            
            
                河图
                
                    修改密码
                    退出登录
                
            
        
    
    
        
            
                
                    
                    
                        近日，TIOBE发布了2014年9月的编程语言排行榜，Java、C++跌至历史最低点，前三名则没有变化，依旧是C、Java、Objective-C。
                        猫猫 ? 3分钟前
                    
                

                
                    
                    
                        (Visual) FoxPro, 4th Dimension/4D, Alice, APL, Arc, Automator, Awk, Bash, bc, Bourne shell, C++CLI, CFML, cg, CL (OS/400), Clean, Clojure, Emacs Lisp, Factor, Forth, Hack, Icon, Inform, Io, Ioke, J, JScript.NET, LabVIEW, LiveCode,
                            M4, Magic, Max/MSP, Modula-2, Moto, NATURAL, OCaml, OpenCL, Oz, PILOT, Programming Without Coding Technology, Prolog, Pure Data, Q, RPG (OS/400), S, Smalltalk, SPARK, Standard ML, TOM, VBScript, Z shell
                        白猫 ? 1分钟前
                    
                

                
                    
                    
                        那个统计表也不能说明一切
                        河图 ? 30秒前
                    
                
            
            
                
                
                
                
                    
                    双击用户私聊
                    
                
            
        
        
            
                
                猫猫
                白猫

@charset "utf-8";
	/*
 * author yinq
 */
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
	color:#000;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	height:800px;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	margin:0;
	padding:0;
}
/* 重设 HTML5 标签,IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea {
	font:14px/1.5 "微软雅黑",tahoma,arial,\5b8b\4f53;
}
input,select,textarea {
	font-size:100%;
}
/* 去掉各Table  cell 的边距并让其边重合 */
table {
	border-collapse:collapse;
	border-spacing:0;
}
/* IE bug fixed:th 不继承 text-align*/
th {
	text-align:inherit;
}
/* 去除默认边框 */
fieldset,img {
	border:0;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
	display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
	border:0;
	font-variant:normal;
}
/* 一致的 del 样式 */
del {
	text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:500;
}
/* 去掉列表前的标识,li 会继承 */
ol,ul {
	list-style:none;
}
/* 对齐是排版最重要的因素,别让什么都居中 */
caption,th {
	text-align:left;
}
/* 来自yahoo,让标题都自定义,适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:500;
}
q:before,q:after {
	content:'';
}
/* 统一上标和下标 */
sub,sup {
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}
sup {
	top:-0.5em;
}
sub {
	bottom:-0.25em;
}
/* 让链接在 hover 状态下显示下划线 */
a:hover {
	text-decoration:underline;
}
/* 默认不显示下划线，保持页面简洁 */
ins,a {
	text-decoration:none;
}
/* 清理浮动 */
.fn-clear:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}
.fn-clear {
	zoom:1;
	/* for IE6 IE7 */
}
/* 隐藏,通常用来与 JS 配合 */
body .fn-hide {
	display:none;
}
/* 设置内联,减少浮动带来的bug */
.fn-left,.fn-right {
	display:inline;
}
.fn-left {
	float:left;
}
.fn-right {
	float:right;
}
/*webkit内核浏览器滚动条*/::-webkit-scrollbar-track-piece {
	background:#e9e9e9;
}
::-webkit-scrollbar {
	width:8px;
	height:8px;
}
::-webkit-scrollbar-button {
	display:none;
}
::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece {
	background:-webkit-gradient(linear,left);
}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:horizontal {
	border-radius:6px;
	background:#bdbdbd;
}
::-webkit-scrollbar-thumb:hover {
	background:#8e8e8e;
}
::-webkit-scrollbar-thumb:active {
	background:#828181;
}
@font-face {
	font-family:'fontello';
	src:url('../font/fontello.eot?68245288');
	src:url('../font/fontello.eot?68245288#iefix') format('embedded-opentype'),url('../font/fontello.woff?68245288') format('woff'),url('../font/fontello.ttf?68245288') format('truetype'),url('../font/fontello.svg?68245288#fontello') format('svg');
	font-weight:normal;
	font-style:normal;
}
/*common*/
body {
	background:#176994 url(http://www.sucainiu.com/themes/images/demo/500x300-9.png);
	height:-moz-calc(100% - 100px);
	height:-webkit-calc(100% - 100px);
	height:calc(100% - 100px);
	padding:50px;
}
.fontico:before {
	font-family:"fontello";
	font-style:normal;
	font-weight:normal;
	speak:none;
	display:inline-block;
	text-decoration:inherit;
	text-align:center;
}
i.down:before {
	content:'\e800';
}
i.lock:before {
	content:'\e806';
}
i.logout:before {
	content:'\e804';
}
/*chatbox*/
.chatbox {
	overflow:hidden;
	height:100%;
	width:100%;
	min-width:600px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	background-color:rgba(255,255,255,1);
}
/*chat_top*/
.chat_top {
	height:60px;
	border-bottom:1px solid #eee;
	background-image:url(../images/top.png);
	background-size:cover;
}
.logo {
	float:left;
}
.logo img {
	vertical-align:bottom;
}
.uinfo {
	margin:10px 0;
	float:right;
	padding-right:20px;
}
.uface {
	float:left;
	height:40px;
}
.uface img {
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
}
.uinfo .uname {
	float:left;
	line-height:40px;
	margin-left:10px;
	color:#2E4059;
	position:relative;
}
.uinfo .uname i.down {
	margin-left:50px;
}
.managerbox {
	display:none;
	width:100px;
	border:1px solid #eee;
	background-color:#FFF;
	padding:10px 0;
	position:absolute;
	top:40px;
	right:-10px;
}
.managerbox a {
	display:block;
	color:#2E4059;
	padding:0px 10px;
}
.managerbox a i {
	margin-right:10px;
}
.managerbox a:hover {
	background-color:#f9f9f9;
	text-decoration:none;
}
/*chat_message*/
.chat_message {
	height:-moz-calc(100% - 61px);
	height:-webkit-calc(100% - 61px);
	height:calc(100% - 61px);
}
/*chat_left*/
.chat_left {
	padding:20px;
	width:-moz-calc(100% - 240px);
	width:-webkit-calc(100% - 240px);
	width:calc(100% - 240px);
	height:-moz-calc(100% - 40px);
	height:-webkit-calc(100% - 40px);
	height:calc(100% - 40px);
	float:left;
}
.message_box {
	background-color:#FFF;
	margin-bottom:20px;
	height:-moz-calc(100% - 120px);
	height:-webkit-calc(100% - 120px);
	height:calc(100% - 120px);
	overflow:auto;
}
.msg_item {
	margin-bottom:20px;
	position:relative;
}
.msg_item .uface {
	position:absolute;
	bottom:0px;
}
.msg_item .item_right {
	margin-left:45px;
	float:left;
	margin-right:15px;
}
.msg_item .msg {
	background-color:#F4F6F8;
	padding:10px 15px;
	line-height:24px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	color:#2E4059;
	position:relative;
	margin-bottom:5px;
}
.msg.own {
	background-color:#E0F1FC;
}
/*自己的聊天记录显示为蓝色*/
.msg_item .msg:before {
	content:"";
	position:absolute;
	bottom:-12px;
	left:10px;
	border-width:12px 12px 0 0;
	border-style:solid;
	border-color:#F4F6F8 transparent;
	display:block;
	width:0;
}
.msg_item .msg.own:before {
	border-color:#E0F1FC transparent;
}
.msg_item .name_time {
	font-size:12px;
	color:#7E90A5;
	line-height:30px;
	padding-left:10px;
}
.write_box {
	height:100px;
	overflow:hidden;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	overflow:hidden;
}
.write_area {
	border:2px solid #E3E8ED;
	border-bottom:none;
	padding:5px;
	outline:none;
	color:#B4C0CE;
	margin:0;
	vertical-align:bottom;
	width:-moz-calc(100% - 14px);
	width:-webkit-calc(100% - 14px);
	width:calc(100% - 14px);
	height:56px;
}
.facebox {
	height:32px;
	width:100%;
	background-color:#E3E8ED;
}
.sub_but {
	float:right;
	padding:0 25px;
	background-color:#7E90A5;
	outline:none;
	border:none;
	height:32px;
	cursor:pointer;
	line-height:30px;
	color:#FFF;
}
/*chat_right*/
.chat_right {
	width:199px;
	height:100%;
	float:left;
	border-left:1px solid #eee;
}
.user_list {
	padding:0;
	overflow:auto;
	height:100%;
}
.user_list li {
	padding:10px 20px;
	color:#2E4059;
	cursor:pointer;
}
.user_list li:hover,.user_list li.selected {
	background-color:#F4F6F8;
}
.user_list li span {
	display:block;
	float:left;
	width:30px;
	height:30px;
	margin-right:10px;
}
.user_list li em {
	display:block;
	float:left;
	height:30px;
	line-height:30px;
}
.user_list li small {
	width:10px;
	height:10px;
	margin:10px;
	float:left;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
}
small.online {
	background-color:#57B869;
}
small.offline {
	background-color:#EB3E3E;
}
.user_list li img {
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	vertical-align:middle;
}
/*expression - 表情,有待增加*/
.expression {
	float:left;
}
/*chat_type - 聊天性质,私聊|群聊*/
.chat_type {
	float:left;
	line-height:30px;
	padding-left:10px;
}

$(document).ready(function(e) {
    $('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);
    $('.uname').hover(
        function() {
            $('.managerbox').stop(true, true).slideDown(100);
        },
        function() {
            $('.managerbox').stop(true, true).slideUp(100);
        }
    );

$('.sub_but').click(function(event) {
        sendMessage(event, fromname, to_uid, to_uname);
    });

/*按下按钮或键盘按键*/
    $("#message").keydown(function(event) {
        var e = window.event || event;
        var k = e.keyCode || e.which || e.charCode;
        //按下ctrl+enter发送消息
        if ((event.ctrlKey && (k == 13 || k == 10))) {
            sendMessage(event, fromname, to_uid, to_uname);
        }
    });
});

function sendMessage(event, from_name, to_uid, to_uname) {
    var msg = $("#message").val();
    if (to_uname != '') {
        msg = '您对 ' + to_uname + ' 说： ' + msg;
    }
    var htmlData = '<div class="msg_item fn-clear">' +
        '   <div class="uface"><img src="images/hetu.jpg" width="40" height="40"  alt=""/></div>' +
        '   <div class="item_right">' +
        '     <div class="msg own">' + msg + '</div>' +
        '     <div class="name_time">' + from_name + ' ? 30秒前</div>' +
        '   </div>' +
        '</div>';
    $("#message_box").append(htmlData);
    $('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);
    $("#message").val('');
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3