以下是 mac版QQ在线聊天界面代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ǰ��js(jquery)��������</title>
<meta name="keywords" content="ǰ��js��������" />
<meta name="description" content="ǰ��js��������" />
<link rel="stylesheet" type="text/css" href="css/chat.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<!--[if lt IE 7]>
<script src="js/IE7.js" type="text/javascript"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/iepng.js" type="text/javascript"></script>
<script type="text/javascript">
EvPNG.fix('body, div, ul, img, li, input, a, span ,label');
</script>
<![endif]-->
</head>
<body>
<div class="content">
<div class="chatBox">
<div class="chatLeft">
<div class="chat01">
<div class="chat01_title">
<ul class="talkTo">
<li><a href="javascript:;">����</a></li></ul>
<a class="close_btn" href="javascript:;"></a>
</div>
<div class="chat01_content">
<div class="message_box mes1">
</div>
<div class="message_box mes2">
</div>
<div class="message_box mes3" style="display: block;">
</div>
<div class="message_box mes4">
</div>
<div class="message_box mes5">
</div>
<div class="message_box mes6">
</div>
<div class="message_box mes7">
</div>
<div class="message_box mes8">
</div>
<div class="message_box mes9">
</div>
<div class="message_box mes10">
</div>
</div>
</div>
<div class="chat02">
<div class="chat02_title">
<a class="chat02_title_btn ctb01" href="javascript:;"></a><a class="chat02_title_btn ctb02"
href="javascript:;" title="ѡ���ļ�">
<embed width="15" height="16" flashvars="swfid=2556975203&maxSumSize=50&maxFileSize=50&maxFileNum=1&multiSelect=0&uploadAPI=http%3A%2F%2Fupload.api.weibo.com%2F2%2Fmss%2Fupload.json%3Fsource%3D209678993%26tuid%3D1887188824&initFun=STK.webim.ui.chatWindow.msgToolBar.upload.initFun&sucFun=STK.webim.ui.chatWindow.msgToolBar.upload.sucFun&errFun=STK.webim.ui.chatWindow.msgToolBar.upload.errFun&beginFun=STK.webim.ui.chatWindow.msgToolBar.upload.beginFun&showTipFun=STK.webim.ui.chatWindow.msgToolBar.upload.showTipFun&hiddenTipFun=STK.webim.ui.chatWindow.msgToolBar.upload.hiddenTipFun&areaInfo=0-16|12-16&fExt=*.jpg;*.gif;*.jpeg;*.png|*&fExtDec=ѡ��ͼƬ|ѡ���ļ�"
data="upload.swf" wmode="transparent" bgcolor="" allowscriptaccess="always" allowfullscreen="true"
scale="noScale" menu="false" type="application/x-shockwave-flash" src="http://service.weibo.com/staticjs/tools/upload.swf?v=36c9997f1313d1c4"
id="swf_3140">
</a><a class="chat02_title_btn ctb03" href="javascript:;" title="ѡ��">
<embed width="15" height="16" flashvars="swfid=2556975203&maxSumSize=50&maxFileSize=50&maxFileNum=1&multiSelect=0&uploadAPI=http%3A%2F%2Fupload.api.weibo.com%2F2%2Fmss%2Fupload.json%3Fsource%3D209678993%26tuid%3D1887188824&initFun=STK.webim.ui.chatWindow.msgToolBar.upload.initFun&sucFun=STK.webim.ui.chatWindow.msgToolBar.upload.sucFun&errFun=STK.webim.ui.chatWindow.msgToolBar.upload.errFun&beginFun=STK.webim.ui.chatWindow.msgToolBar.upload.beginFun&showTipFun=STK.webim.ui.chatWindow.msgToolBar.upload.showTipFun&hiddenTipFun=STK.webim.ui.chatWindow.msgToolBar.upload.hiddenTipFun&areaInfo=0-16|12-16&fExt=*.jpg;*.gif;*.jpeg;*.png|*&fExtDec=ѡ��ͼƬ|ѡ���ļ�"
data="upload.swf" wmode="transparent" bgcolor="" allowscriptaccess="always" allowfullscreen="true"
scale="noScale" menu="false" type="application/x-shockwave-flash" src="http://service.weibo.com/staticjs/tools/upload.swf?v=36c9997f1313d1c4"
id="swf_3140">
</a>
<label class="chat02_title_t">
<a href="chat.htm" target="_blank">�����¼</a></label>
<div class="wl_faces_box">
<div class="wl_faces_content">
<div class="title">
<ul>
<li class="title_name">����</li><li class="wl_faces_close"><span> </span></li></ul>
</div>
<div class="wl_faces_main">
<ul>
<li><a href="javascript:;">
<img src="img/emo_01.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_02.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_03.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_04.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_05.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_06.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_07.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_08.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_09.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_10.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_11.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_12.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_13.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_14.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_15.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_16.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_17.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_18.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_19.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_20.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_21.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_22.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_23.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_24.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_25.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_26.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_27.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_28.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_29.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_30.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_31.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_32.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_33.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_34.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_35.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_36.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_37.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_38.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_39.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_40.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_41.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_42.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_43.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_44.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_45.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_46.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_47.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_48.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_49.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_50.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_51.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_52.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_53.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_54.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_55.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_56.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_57.gif" /></a></li>
<li><a href="javascript:;">
<img src="img/emo_58.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_59.gif" /></a></li><li><a href="javascript:;">
<img src="img/emo_60.gif" /></a></li>
</ul>
</div>
</div>
<div class="wlf_icon">
</div>
</div>
</div>
<div class="chat02_content">
<textarea id="textarea"></textarea>
</div>
<div class="chat02_bar">
<ul>
<li style="right: 5px; top: 5px;"><a href="javascript:;">
<img src="img/send_btn.jpg"></a></li>
</ul>
</div>
</div>
</div>
<div class="chatRight">
<div class="chat03">
<div class="chat03_title">
<label class="chat03_title_t">
��Ա�б�</label>
</div>
<div class="chat03_content">
<ul>
<li>
<label class="online">
</label>
<a href="javascript:;">
<img src="img/head/2013.jpg"></a><a href="javascript:;" class="chat03_name">����</a>
</li>
<li>
<label class="offline">
</label>
<a href="javascript:;">
<img src="img/head/2014.jpg"></a><a href="javascript:;" class="chat03_name">�³�</a>
</li>
<li class="choosed">
<label class="offline">
</label>
<a href="javascript:;">
<img src="img/head/2015.jpg"></a><a href="javascript:;" class="chat03_name">����</a>
</li>
<li>
<label class="offline">
</label>
<a href="javascript:;">
<img src="img/head/2016.jpg"></a><a href="javascript:;" class="chat03_name">����</a>
</li>
<li>
<label class="online">
</label>
<a href="javascript:;">
<img src="img/head/2017.jpg"></a><a href="javascript:;" class="chat03_name">�⾴</a>
</li>
<li>
<label class="offline">
</label>
<a href="javascript:;">
<img src="img/head/2018.jpg"></a><a href="javascript:;" class="chat03_name">������</a>
</li>
<li>
<label class="offline">
</label>
<a href="javascript:;">
<img src="img/head/2019.jpg"></a><a href="javascript:;" class="chat03_name">֣С��</a>
</li>
<li>
<label class="online">
</label>
<a href="javascript:;">
<img src="img/head/2020.jpg"></a><a href="javascript:;" class="chat03_name">��ɺɺ</a>
</li>
<li>
<label class="offline">
</label>
<a href="javascript:;">
<img src="img/head/2021.jpg"></a><a href="javascript:;" class="chat03_name">��ǿ</a>
</li>
<li>
<label class="offline">
</label>
<a href="javascript:;">
<img src="img/head/2022.jpg"></a><a href="javascript:;" class="chat03_name">�̺���</a>
</li>
</ul>
</div>
</div>
</div>
<div style="clear: both;">
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p></p>
<p></p>
</div>
</body>
</html>JS代码(chat.js):
function message(){
var a=$.blinkTitle.show();
setTimeout(function(){
$.blinkTitle.clear(a)}
,8e3)}
$(document).ready(function(){
function e(){
function h(){
-1!=g.indexOf("*#emo_")&&(g=g.replace("*#","<img src='img/").replace("#*",".gif'/>"),h())}
var e=new Date,f="";
f+=e.getFullYear()+"-",f+=e.getMonth()+1+"-",f+=e.getDate()+" ",f+=e.getHours()+":",f+=e.getMinutes()+":",f+=e.getSeconds();
var g=$("#textarea").val();
h();
var i="<div class='message clearfix'><div class='user-logo'><img src='"+b+"'/>"+"</div>"+"<div class='wrap-text'>"+"<h5 class='clearfix'>\u5f20\u98de</h5>"+"<div>"+g+"</div>"+"</div>"+"<div class='wrap-ri'>"+"<div clsss='clearfix'><span>"+f+"</span></div>"+"</div>"+"<div style='clear:both;
'></div>"+"</div>"+"<div class='message clearfix'>"+"<div class='user-logo'>"+"<img src='"+c+"'/>"+"</div>"+"<div class='wrap-text'>"+"<h5 class='clearfix'>"+d+"</h5>"+"<div>"+g+"\u7684\u56de\u590d\u5185\u5bb9</div>"+"</div>"+"<div class='wrap-ri'>"+"<div clsss='clearfix'><span>"+f+"</span></div>"+"</div>"+"<div style='clear:both;
'></div>";
null!=g&&""!=g?($(".mes"+a).append(i),$(".chat01_content").scrollTop($(".mes"+a).height()),$("#textarea").val(""),message()):alert("\u8bf7\u8f93\u5165\u804a\u5929\u5185\u5bb9!")}
var a=3,b="img/head/2024.jpg",c="img/head/2015.jpg",d="\u738b\u65ed";
$(".close_btn").click(function(){
$(".chatBox").hide()}
),$(".chat03_content li").mouseover(function(){
$(this).addClass("hover").siblings().removeClass("hover")}
).mouseout(function(){
$(this).removeClass("hover").siblings().removeClass("hover")}
),$(".chat03_content li").dblclick(function(){
var b=$(this).index()+1;
a=b,c="img/head/20"+(12+a)+".jpg",d=$(this).find(".chat03_name").text(),$(".chat01_content").scrollTop(0),$(this).addClass("choosed").siblings().removeClass("choosed"),$(".talkTo a").text($(this).children(".chat03_name").text()),$(".mes"+b).show().siblings().hide()}
),$(".ctb01").mouseover(function(){
$(".wl_faces_box").show()}
).mouseout(function(){
$(".wl_faces_box").hide()}
),$(".wl_faces_box").mouseover(function(){
$(".wl_faces_box").show()}
).mouseout(function(){
$(".wl_faces_box").hide()}
),$(".wl_faces_close").click(function(){
$(".wl_faces_box").hide()}
),$(".wl_faces_main img").click(function(){
var a=$(this).attr("src");
$("#textarea").val($("#textarea").val()+"*#"+a.substr(a.indexOf("img/")+4,6)+"#*"),$("#textarea").focusEnd(),$(".wl_faces_box").hide()}
),$(".chat02_bar img").click(function(){
e()}
),document.onkeydown=function(a){
var b=document.all?window.event:a;
return 13==b.keyCode?(e(),!1):void 0}
,$.fn.setCursorPosition=function(a){
return 0==this.lengh?this:$(this).setSelection(a,a)}
,$.fn.setSelection=function(a,b){
if(0==this.lengh)return this;
if(input=this[0],input.createTextRange){
var c=input.createTextRange();
c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select()}
else input.setSelectionRange&&(input.focus(),input.setSelectionRange(a,b));
return this}
,$.fn.focusEnd=function(){
this.setCursorPosition(this.val().length)}
}
),function(a){
a.extend({
blinkTitle:{
show:function(){
var a=0,b=document.title;
if(-1==document.title.indexOf("\u3010"))var c=setInterval(function(){
a++,3==a&&(a=1),1==a&&(document.title="\u3010\u3000\u3000\u3000\u3011"+b),2==a&&(document.title="\u3010\u65b0\u6d88\u606f\u3011"+b)}
,500);
return[c,b]}
,clear:function(a){
a&&(clearInterval(a[0]),document.title=a[1])}
}
}
)}
(jQuery);
CSS代码(chat.css):
*{margin:0;padding:0;border:none;font-size:12px;text-align:left;}
ul{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;color:#f60;}
.content{width:1000px;height:auto;margin:0 auto;text-align:center;}
.chatBox{width:730px;border:1px #666666 solid;height:auto;margin:0 auto;margin-top:150px;position:relative;}
.chatLeft{border-right:1px #bebebe solid;width:562px;height:auto;float:left;}
.chatRight{width:166px;height:auto;float:right;}
.chat01_title,.chat03_title{background:url('../img/title_bg.jpg') repeat-x 0 0;height:30px;position:relative;}
.talkTo{}
.talkTo li{background:url('../img/title-bg.png') no-repeat 0px -1px;_background-position:0 0;line-height:17px;float:left;padding-left:6px;margin:5px 20px;_margin-left:9px;}
.talkTo li a{background:url('../img/title-bg.png') no-repeat bottom right;padding:4px 11px 4px 7px;_padding-top:0px;_padding-bottom:0px;height:19px;font-size:12px;font-weight:bold;color:#333;text-decoration:none;}
.close_btn{background:url('../img/icon.png') no-repeat 0 0;position:absolute;top:10px;right:8px;display:block;width:15px;height:15px;}
.chat02_title{background:url('../img/chat_title_bg.jpg') repeat-x 0 0;height:25px;position:relative;}
.chat02_bar{background:url('../img/chat_bar_bg.jpg') repeat-x 0 0;height:35px;position:relative;}
.chat02_bar ul{height:100%;background:url('../img/binliy_logo.png') no-repeat 10px 8px;}
.chat02_bar li{position:absolute;}
.chat03_title_t{background:url('../img/icon.png') no-repeat 0px -370px;position:absolute;padding-left:25px;top:8px;left:20px;display:block;width:auto;height:15px;font-size:12px;font-weight:bold;}
.chat01_content{height:220px;overflow-x:none;overflow-y:auto;resize:vertical;}
.chat02_content{height:auto;}
.chat03_content{text-align:left;font-size:12px;color:#333;margin:8px 0px;}
.chat02_content textarea{border:medium none;display:block;width:552px;height:96px;overflow-y:auto;padding:5px;resize:vertical;}
.chat03_name{color:#333;position:absolute;top:9px;left:40px;display:block;}
.chat03_content ul{}
.chat03_content ul li{position:relative;padding:3px 6px;height:31px;_padding-bottom:0px;}
.chat03_content ul li.hover{background:#ebeef3;}
.chat03_content ul li.choosed{background:#ebeef3;}
.chat03_content ul li a{}
.chat03_content ul img{width:30px;height:30px;}
.chat02_title_btn{background:url('../img/icon.png') no-repeat 0 0;cursor:pointer;float:left;display:block;width:15px;height:15px;margin:5px 6px;}
.ctb01{background-position:0 -90px;margin-left:18px;_margin-left:8px;}
.ctb02{background-position:0 -152px;}
.ctb03{background-position:0 -216px;}
.chat02_title_t{background:url('../img/icon.png') no-repeat 0px -487px;position:absolute;padding-left:25px;top:8px;right:20px;display:block;width:auto;height:15px;}
.chat02_title_t a{color:#333;font-size:12px;text-decoration:none;}
.chat02_title_t a:hover{color:#f60;text-decoration:underline;}
input.f1,input.f2{display:none;}
.message_box{display:none;_width:550px;}
.message{border-bottom:1px solid #EEE;clear:both;padding:10px 10px 10px 0;position:relative;margin:0px 10px;}
.message .user-logo{float:left;width:50px;height:50px;resize:none;}
.message .wrap-text{float:left;margin-left:10px;display:inline;width:360px;overflow:hidden;resize:none;}
.message h5{color:#369;font-weight:bold;}
.message .wrap-text div{margin:5px 0;word-break:break-all;word-wrap:break-word;height:auto;overflow:hidden;}
.message .wrap-ri{float:right;width:110px;overflow:hidden;resize:none;}
.message .wrap-ri div{text-align:right;color:#999;height:18px;line-height:18px;overflow:hidden;clear:both;position:absolute;bottom:10px;right:5px;}
.message .wrap-ri div span{display:inline-block;line-height:18px;vertical-align:bottom;zoom:1;}
.wl_faces_box{background:url('../img/wlf_bg.png') repeat 0 0;position:absolute;width:428px;height:225px;bottom:22px;left:-50px;display:none;}
.wl_faces_content{background:#fff;border:1px #ccc solid;width:417px;height:216px;margin:3px 4px;}
.wl_faces_content .title{background:url('../img/wlf_title_bg.jpg') repeat-x 0 0;height:40px;position:relative;}
.wl_faces_content .title ul{}
.wl_faces_content .title ul li{position:absolute;display:block;}
.wl_faces_content .title ul li.title_name{background:url('../img/wlf_title_btn.jpg') no-repeat 0 0;width:82px;height:30px;bottom:0;_bottom:-2px;left:15px;text-align:center;line-height:32px;font-weight:bold;color:#333;}
.wl_faces_content .title ul li.wl_faces_close{right:8px;top:15px;}
.wl_faces_content .title ul li.wl_faces_close span{background:url('../img/icon.png') repeat-x 0 0;cursor:pointer;display:block;width:15px;height:15px;}
.wl_faces_main{}
.wl_faces_main ul{margin:12px 28px;overflow:hidden;border-top:1px #CCC solid;border-left:1px #CCC solid;width:360px;}
.wl_faces_main ul li{float:left;border-right:1px #CCC solid;border-bottom:1px #CCC solid;height:22px;width:26px;margin:-1px 0 0 -1px;padding:4px 2px;text-align:center;}
.wl_faces_main ul li img{width:22px;height:22px;}
.wlf_icon{background:url('../img/layer_arrow.png') no-repeat 0 0;position:absolute;width:22px;height:9px;bottom:-4px;_bottom:-11px;left:61px;}
.chat03_content li label{display:block;position:absolute;width:9px;height:9px;left:27px;}
label.online{background:url('../img/status.gif') no-repeat 0 0;_background:url('../img/status.gif') no-repeat 0 5px;bottom:4px;_bottom:2px;}
label.offline{background:url('../img/status.gif') no-repeat 0 -11px;bottom:4px;_top:25px;}
分享到QQ
分享到微博
微信扫一扫
