ฉันได้สร้างเทอร์มินัลแชท h5 WeChat บนมือถือมาก่อน ในช่วงเวลานี้ ฉันจัดเรียงโปรเจ็กต์ก่อนหน้านี้และอัปเกรดตามเวอร์ชันดั้งเดิม ดังนั้นเราจึงมีเวอร์ชันเลียนแบบ h5 WeChat ระดับสูง เพิ่มใหม่แล้ว: Wechat, สมุดที่อยู่, สำรวจ และฉัน โมดูลมีการสลับหน้าจอแบบสัมผัสและสไลด์ด้านซ้ายและขวา หน้าแชทได้ปรับการแสดงตัวอย่างหลายภาพ การเล่นวิดีโอ UI เมนูแบบกดแบบยาว ตัวแก้ไขที่ด้านล่างของแชทได้รับการปรับปรุงและจัดระเบียบใหม่ (เพิ่มอีโมติคอนเพิ่มเติม) และหน้าต่างป๊อปอัปใช้ wcPop.js ที่พัฒนาขึ้นเอง ลองดูที่การเรนเดอร์โปรเจ็กต์โดยเฉพาะ!
ข้อมูลโค้ด html:
<!-- // แผงฟังก์ชันด้านล่างของ Wechat--><div class=wc__footTool-panel> <!-- โมดูลกล่องอินพุต--> <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>ส่ง</button> </div> <!-- นิพจน์, โมดูลการเลือก--> <div class=wc__choose-panel wc__borT style= display: none;> <!-- พื้นที่นิพจน์--> <div class=wrap-emotion style=display: none;> <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 class=clearfix> <li class=swiperTmpl cur tmpl=swiper__tmpl-emotion01><img src=img/emotion/face01/face-lbl.png <li class=swiperTmpl tmpl=swiper__tmpl-emotion02><img src=img/อารมณ์/ 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 คลาส =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> <!-- เลือกพื้นที่--> <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 /><ประเภทอินพุต=ไฟล์ ยอมรับ=รูปภาพ/* /></span><em>รูปภาพ</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>วิดีโอ</em></a></li> <li><a class=J__wchatHb href=javascript:;><span class=img><img src=img/wchat/icon__choose-hb.png /></span><em>ซองจดหมายสีแดง</em></a></li> <li > <a class=J__wchatSc href=javascript:;><span class=img><img src=img/wchat/icon__choose-sc.png /></span><em>คอลเลกชันของฉัน</em></a></li> <li><a class=J__wchatWj href=javascript:;><span class=img><img src=img/ wchat /icon__choose-wj.png /></span><em>ไฟล์</em></a></li> </ul> </div> </div> </div></div>< div class=wc__choosePanel-tmpl> <!-- // ซองจดหมายสีแดง template.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>จำนวนทั้งหมด</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>จำนวนซองจดหมายสีแดง< /li> label><input class=ipt-txt flex1 type=tel name=hbNum placeholder=กรอกตัวเลข/><em class=unit>ชิ้น</em> </li> <li class=tips>จำนวนคนที่ออนไลน์ทั้งหมดคือ <em class=memNum>186</em></li> <li class=item item-area> <textarea class=describe name=content placeholder=ขอแสดงความยินดีที่รวยและ โชคดี></ textarea> </li> <li class=amountTotal>￥<em class=num>0.00</em></li> </ul> </div> </div> <!-- //เทมเพลตซองจดหมายสีแดง.end --></div>
ข้อมูลโค้ด Js:
// ...กดเมนูป๊อปอัพค้างไว้ $(#J__chatMsgList).on(longTap, li .msg, function(e){ var that = $(this), menuTpl, menuNode = $(<div class='wc__chatTapMenu ภาพเคลื่อนไหว -fadeIn'></div>); that.addClass(เทป); that.parents(li).siblings().find(.msg).removeClass(เทป) var isRevoid = that.parents(li).hasClass(me); var _revoid = isRevoid ? <i class='ico i4'></i>ถอนออก</a> : ; if(that.hasClass(picture)){ console.log(กดรูปภาพค้างไว้); menuTpl = <div class='menu menu-picture'><a href='#'><i class='ico i1'></i>คัดลอก</a><a href='#'><i class=' ico i2'></i>รวบรวม</a><a href='#'><i class='ico i3'></i>บันทึกเป็น</a>+ _revoid +<a href='#' ><i class='ico i5'></i>ลบ</a></div>; }else if(that.hasClass(video)){ console.log(วิดีโอกดแบบยาว); menuTpl = <div class='menu menu-video' ><a href='#'><i class='ico i3'></i>บันทึกเป็น</a> + _revoid +<a href='#'><i class='ico i5'></i>ลบ</a></div>; }else{ console.log(ข้อความกดแบบยาว); menuTpl = <div class='menu menu-text'><a href='#'> <i class='ico i1'></i>คัดลอก</a><a href='#'><i class='ico i2'></i>รวบรวม</a> + _revoid +<a href ='#'><i class='ico i5'></i>ลบ</a></div>; } if(!$(.wc__chatTapMenu).length){ $(.wc__chatMsg-panel).append(menuNode.html(menuTpl) ); autoPos(); } อื่น ๆ $(.wc__chatTapMenu).hide().html(menuTpl).fadeIn(250); } ฟังก์ชั่น autoPos(){ console.log(that.position().top) var _other = that.parents(li ).hasClass(อื่นๆ); $(.wc__chatTapMenu).css({ ตำแหน่ง: สัมบูรณ์, ซ้าย: that.position().left + parseInt(that.css(marginLeft)) + (_other ? 0 : that.outerWidth() - $(.wc__chatTapMenu).outerWidth()), top: that.position().top - $(.wc__chatTapMenu).outerHeight( ) - 8 }); }});การแสดงผล:
สรุปข้างต้นคืออีโมติคอนแชท WeChat เลียนแบบ HTML5 |. ฟังก์ชันตัวแก้ไขที่แนะนำโดยตัวแก้ไข คุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!