H5チャットルーム

h5チャットルームwebappバージョン|イミテーションWeChatインターフェースチャットルーム|マルチプレイヤーライブチャットルーム



H5 Chat Room Webapp Version Imitation Wechat Interface Chat Room Multiplayer Live Chat Room



h5モバイルチャットルーム| webappグループチャットルーム|模倣WeChatチャットルーム| h5ライブチャットルーム

今年のFIFAワールドカップはとてもエキサイティングです。最近、HTML5を使用して、携帯電話のようなWeChatインターフェイスチャットルームを開発しました。 h5チャットルームは新しい750pxの柔軟なフレックスレイアウトを使用し、fontsize.jsでレスポンシブなremを使用します。ページポップアップウィンドウは、独自のウィンドウを使用して開発されました wcPop.jsプラグイン エディター部分は、元の単一の絵文字からアニメーションの絵文字として追加され、メッセージや絵文字の送信などのマイクロインタラクション機能を実現します。全体像、ビデオ効果のプレビュー|模倣WeChatの赤い包み、報酬。

プロジェクトのスクリーンショットは次のとおりです。














// ...scroll the bottom of the chat area function wchat_ToBottom(){ //$('.wc__chatMsg-panel').animate({scrollTop: $('#J__chatMsgList').height()}, 0) $('.wc__slimscroll2').slimscroll({ scrollBy: $('#J__chatMsgList').height(), height: 'auto' }) } // ...emoji, selection area switch $('.wc__editor-panel').on('click', '.btn', function(){ var that = $(this) $('.wc__choose-panel').show() if (that.hasClass('btn-emotion')) { $('.wc__choose-panel .wrap-emotion').show() $('.wc__choose-panel .wrap-choose').hide() // Initialize the swiper emoji !emotionSwiper && $('#J__emotionFootTab ul li.cur').trigger('click') } else if (that.hasClass('btn-choose')) { $('.wc__choose-panel .wrap-emotion').hide() $('.wc__choose-panel .wrap-choose').show() } wchat_ToBottom() }) // ... handle editor information // Format editor contains tags _editor.addEventListener('click', function () { //$('.wc__choose-panel').hide() }, true) _editor.addEventListener('focus', function(){ surrounds() }, true) _editor.addEventListener('input', function(){ surrounds() }, false) // send Message var $chatMsgList = $('#J__chatMsgList') function isEmpty()(?:[ ]+$)/g, '') == '' $('.J__wchatSubmit').on('click', function(){ // determine if the content is empty if(isEmpty()) return var html = $editor.html() var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g html = html.replace(reg, ' $1$2 ') var msgTpl = [ '

  • Nice milk thinking

    '+ html +'
    • ' ].join('') $chatMsgList.append(msgTpl) // Clear the chat box and get the focus (processing input methods and emoticons-focus) if(!$('.wc__choose-panel').is(':hidden')){ $editor.html('') }else{ $editor.html('').focus().trigger('click') } wchat_ToBottom() })

    みんなで交流して一緒に勉強することを歓迎しますQQ：（282310962）WX：（xy190310）