Obrolan WeChat imitasi tinggi HTML5, fungsi editor obrolan WeChat |

Saya telah membuat versi terminal seluler obrolan WeChat h5 sebelumnya. Selama periode waktu ini, saya memilah proyek sebelumnya dan memutakhirkannya berdasarkan versi aslinya. Dengan cara ini, kami memiliki versi tiruan tinggi obrolan WeChat tiruan h5 , empat yang baru ditambahkan: WeChat, Buku Alamat, Jelajahi, dan Saya. Modul ini memiliki peralihan layar sentuh dan geser ke kiri dan kanan, halaman obrolan telah mengoptimalkan pratinjau multi-gambar, pemutaran video, UI menu tekan lama, editor di bagian bawah obrolan telah dioptimalkan ulang dan diatur (menambahkan lebih banyak emotikon) , dan jendela pop-up menggunakan wcPop.js yang dikembangkan sendiri, khususnya Lihat rendering proyek!

cuplikan kode html:

 <!-- //Panel fungsi bawah Wechat--><div class=wc__footTool-panel> <!-- Modul kotak masukan--> <div class=wc__editor-panel wc__borT flexbox> <div class=wrap-editor flex1 > <div class=editor J__wcEditor contenteditable=true></div></div> <i class=btn btn-emotion></i> <i class=btn btn-choose></i> <button class=btn-submit J__wchatSubmit>Kirim</button> </div> <!-- Ekspresi, modul pemilihan--> <div class=wc__choose-panel wc__borT style= tampilan: tidak ada;> <!-- Area ekspresi--> <div class=wrap-emotion style=display: tidak ada;> <div class=emotion__cells flexbox flex__direction-column> <div class=emotion__cells-swiper flex1 id=J__swiperEmotion> <div class=swiper-container> <div class=swiper-wrapper></div> <div class=pagination-emotion></div> < /div> </div> <div class=emotion__cells-footer id=J__emotionFootTab> <ul kelas=clearfix> <li class=swiperTmpl sekarang tmpl=swiper__tmpl-emotion01><img src=img/emotion/face01/face-lbl.png <li class=swiperTmpl tmpl=swiper__tmpl-emotion02><img src=img/emotion/ face02/face-lbl.gif <li class=swiperTmpl tmpl=swiper__tmpl-emotion03><img src=img/emotion/face03/face-lbl.gif <li class=swiperTmpl tmpl=swiper__tmpl-emotion04><img src=img/emotion/face04/face-lbl.gif <li kelas =swiperTmpl tmpl=swiper__tmpl-emotion05><img src=img/emotion/face05/face-lbl.gif <li class=swiperTmpl tmpl=swiper__tmpl-emotion06><img src=img/emotion/face06/face-lbl.gif <li class=swiperTmplSet><img src=img /wchat/icon__emotion-set.png </ul> </div> </div> </div> <!-- Pilih area--> <div class=wrap-choose style=display: none;> <div class=choose__cells> <ul class=clearfix> <li><a class=J__wchatZp href=javascript :;><span class=img><img src=img/wchat/icon__choose-zp.png /><tipe input=file diterima=gambar/* /></span><em>Foto</em></a></li> <li><a class=J__wchatSp href=javascript:;><span class=img><img src=img/wchat/ icon__choose-sp.png /><input type=file Accept=video/* /></span><em>Video</em></a></li> <li><a class=J__wchatHb href=javascript:;><span class=img><img src=img/wchat/icon__choose-hb.png /></span><em>Amplop merah</em></a></li> <li > <a class=J__wchatSc href=javascript:;><span class=img><img src=img/wchat/icon__choose-sc.png /></span><em>Koleksi Saya</em></a></li> <li><a class=J__wchatWj href=javascript:;><span class=img><img src=img/ wchat /icon__choose-wj.png /></span><em>Berkas</em></a></li> </ul> </div> </div> </div></div>< div class=wc__choosePanel-tmpl> <!-- //Templat amplop merah.begin --> <div id=J__popupTmpl-Hongbao style=display:none;> <div class=wc__popupTmpl tmpl-hongbao> <i class=wc-xclose > </i> <ul class=clearfix> <li class=item flexbox> <label class=txt>Jumlah total</label><input class=ipt-txt flex1 type=tel name=hbAmount placeholder=0.00 /><em class=unit>元</em> </li> <li class=item flexbox> <label class=txt>Jumlah amplop merah< /li> label><input class=ipt-txt flex1 type=tel name=hbNum placeholder=isi nomor/><em class=unit>potongan</em> </li> <li class=tips>Total <em class=memNum>186</em>orang sedang online</li> <li class=item item-area> <textarea class=describe name=content placeholder=Selamat Anda menjadi kaya dan baik keberuntungan></ textarea> </li> <li class=amountTotal>￥<em class=num>0,00</em></li> </ul> </div> </div> <!-- //Template amplop merah.end --></div>

Cuplikan kode Js:

 // ...tekan lama menu pop-up $(#J__chatMsgList).on(longTap, li .msg, function(e){ var that = $(this), menuTpl, menuNode = $(<div class='wc__chatTapMenu animasi anim -fadeIn'></div>); that.addClass(direkam); that.parents(li).siblings().find(.msg).removeClass(direkam); var isRevoke = that.parents(li).hasClass(me); var _revoke = isRevoke ? <i class='ico i4'></i>Tarik</a> : ; if(that.hasClass(gambar)){ console.log(gambar tekan lama); <div class='menu menu-picture'><a href='#'><i class='ico i1'></i>Salin</a><a href='#'><i class=' ico i2'></i>Kumpulkan</a><a href='#'><i class='ico i3'></i>Simpan sebagai</a>+ _revoke +<a href='#' <i kelas='ico i5'></i>Hapus</a></div>; }else if(that.hasClass(video)){ console.log(video tekan lama); ><a href='#'><i class='ico i3'></i>Simpan sebagai</a> + _revoke +<a href='#'><i class='ico i5'></i>Hapus</a></div>; }else{ console.log(teks tekan lama); menuTpl = <div class='menu menu-text'><a href='#'> <i class='ico i1'></i>Salin</a><a href='#'><i class='ico i2'></i>Kumpulkan</a> + _revoke +<a href ='#'><i class='ico i5'></i>Hapus</a></div>; } if(!$(.wc__chatTapMenu).length){ $(.wc__chatMsg-panel).append(menuNode.html(menuTpl) ); $(.wc__chatTapMenu).hide().html(menuTpl).fadeIn(250); autoPos(); } fungsi autoPos(){ console.log(that.position().top) var _other = that.parents(li ).hasClass(lainnya); $(.wc__chatTapMenu).css({ posisi: absolut, kiri: itu.posisi().kiri + parseInt(that.css(marginLeft)) + (_other ? 0 : that.outerWidth() - $(.wc__chatTapMenu).outerWidth()), atas: that.position().top - $(.wc__chatTapMenu).outerHeight( ) - 8 }});

Render:

Di atas adalah fungsi editor obrolan WeChat imitasi tinggi HTML5 dan emotikon obrolan WeChat |. Saya harap ini dapat membantu Anda Anda tepat waktu. dari. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!