jQuery+amaze ui仿电脑端微信网页版聊天界面代码

jQuery+amaze ui仿电脑端微信网页版聊天界面代码

jQuery+amaze ui仿电脑端微信网页版聊天界面代码

jQuery+amaze ui仿电脑端微信网页版聊天界面代码,还有很多功能还没有完善,例如对话快捷键,用户切换,表情包发送等等,是个半成品吧,需要自己完善成直角想要的产品。

源码介绍

js代码

"text/javascript" src="js/jquery.min.js"
"text/javascript" src="js/amazeui.min.js"
"text/javascript" src="js/zUI.js"
"text/javascript" src="js/wechat.js"
"text/javascript"> 
        //三图标 
        window.onload=function(){ 
            function a(){ 
                var si1 = document.getElementById('si_1'); 
                var si2 = document.getElementById('si_2'); 
                var si3 = document.getElementById('si_3'); 
                si1.onclick=function(){ 
                    si1.style.background="url(images/icon/head_2_1.png) no-repeat" 
                    si2.style.background=""
                    si3.style.background=""
                }
                si2.onclick=function(){ 
                    si2.style.background="url(images/icon/head_3_1.png) no-repeat" 
                    si1.style.background=""
                    si3.style.background=""
                }
                si3.onclick=function(){ 
                    si3.style.background="url(images/icon/head_4_1.png) no-repeat" 
                    si1.style.background=""
                    si2.style.background=""
                }
            }
            function b(){ 
                var text = document.getElementById('input_box'); 
                var chat = document.getElementById('chatbox'); 
                var btn = document.getElementById('send'); 
                var talk = document.getElementById('talkbox'); 
                btn.onclick=function(){ 
                    if(text.value ==''){ 
                        alert('不能发送空消息'); 
                    }else{ 
                        chat.innerHTML += '+'images/own_head.jpg'+'">'+text.value+''
                        text.value = ''
                        chat.scrollTop=chat.scrollHeight; 
                        talk.style.background="#fff"
                        text.style.background="#fff"
                    }
                }
            }
            a(); 
            b(); 
        }


分享到 :

发表评论

登录... 后才能评论