HTML5實現手機QQ表情功能


主要素材和JS來自QQ空間觸屏版( http://m.qzone.com ),我只是代碼的搬運工。代碼下載
預覽請使用較新版的Chrome,然后啟用開發者工具,設備模式。詳見:(http://www.cnblogs.com/liyunhua/p/4544738.html)

修改

1.整合多個文件為單個ts文件,去除seajs等其他無關js

提供兩種代碼:

  • 包含zepto.js(類似jquery)的,包含拖動動畫。(見文件ZeptoEmoji.html)
  • 單個文件,不依賴其他js,不包含拖動動畫。(見文件JsEmoji.html)

2.只包含表情相關樣式,去除其他無用樣式

3.效果圖

實現原理

1. 定義一個對象,對應保存每個表情的漢字。

2. 然后初始化時,拼接html,ul,li,i(<i data-emoji="101"></i>)。

3. 每個ul對應一個背景圖,然后i的位置正對應表情位置

4. 綁定i標簽事件

解析代碼下載:http://files.cnblogs.com/files/xcong/face.zip

轉載請注明出處:http://www.cnblogs.com/xcong/p/4646069.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM