主要素材和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