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

HTML5实现手机QQ表情功能的更多相关文章

  1. 【腾讯敏捷转型No.8】你爱上手机QQ了么?

    上一篇文章<QQ邮箱如何利用敏捷做到中国第一>,“QQ邮箱之母”马化腾带领QQ邮箱团队,从流量思维向产品思维转变,“QQ邮箱之父”张小龙也是在这个敏捷转型过程中,剔除固有的成见,激发对优秀 ...

  2. 腾讯QQ表情为什么如此成功呢

    本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:腾讯开发的QQ表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...

  3. 腾讯技术分享:GIF动图技术详解及手机QQ动态表情压缩技术实践

    本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦.” 1.GIF格式的历史 GIF ( Gr ...

  4. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  5. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  6. 手机QQ v4.2 有感

    因为经常宅宿舍,很少出门,所以无论微信还是手机QQ都很少使用. 刚好最近见别人发来的表情我的2012自改版QQ总是无法解析,只能显示[吼叫].[啦啦]之类的字符,于是更新了v4.2的手机QQ把玩一番, ...

  7. 打破“中规中矩”,手机QQ何以萌翻众人?

        随着移动互联网的迅猛发展,越来越多的手机应用展现在了用户面前,不过,面对林林总总的手机应用,有时候我们却提不起兴趣,因为功能的同质化,UI的千篇一律已经让我们多少有些审美疲劳的感觉.     ...

  8. 腾讯技术分享:Android版手机QQ的缓存监控与优化实践

    本文内容整理自公众号腾讯Bugly,感谢原作者的分享. 1.问题背景 对于Android应用来说,内存向来是比较重要的性能指标.内存占用过高,会影响应用的流畅度,甚至引发OOM,非常影响用户体验.因此 ...

  9. QQ表情的发送与接收

    我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...

随机推荐

  1. codeblocks中cocos2dx项目添加新的.cpp和.h文件后编译运行的方法

    新建了cocos2dx项目后(比如我这里建立的项目名为Test01),项目目录下有如下目录和文件: bin CMakeLists.txt MyGame.layout proj.win10 Classe ...

  2. Java创建数组的三种方法

    ■ 第一种: int[] arr=new int[6]; arr[0] = 1; arr[1] = 2 arr[2] = 3; arr[3] = 4; arr[4] = 5; arr[5] = 6; ...

  3. Runtime 运行时之一:类与对象

    Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理.这种动态语言的优势在于:我们写代码时能够更具灵活性,如我们可以把消息转发给我们想要的对象,或者随意交 ...

  4. IOS strong和weak的区别

    strong和weak的区别 strong表示保留它指向的堆上的内存区域不再指向这块区域了. 也就是说我强力指向了一个区域,我们不再指向它的条件只有我们指向nil或者我自己也不在内存上,没有人stro ...

  5. Linux数据链路层的包解析

    仅以此文作为学习笔记,初学者,如有错误欢迎批评指正,但求轻喷.一般而言,Linux系统截获数据包后,会通过协议栈,按照TCP/IP层次进行解析,那我们如何直接获得更为底层的数据报文呢,这里用到一个类型 ...

  6. shell中特殊变量$0 $1 $# $$ $! $?的涵义

    $0: 执行脚本的名字 $*和$@: 将所有参数返回 $#: 参数的个数 $_: 代表上一个命令的最后一个参数 $$: 代表所在命令的PID $!: 代表最后执行的后台命令的PID $?: 代表上一个 ...

  7. Think PHP递归重新排序无限极子分类数组(递归无限极分类)

    Think PHP递归重新排序无限极子分类数组 // 递归重新排序无限极子分类数组 function recursive($array,$pid=0,$level=0){ $arr = array() ...

  8. 从零打造在线网盘系统之SSH框架整合

    欢迎浏览Java工程师SSH教程从零打造在线网盘系统系列教程,本系列教程将会使用SSH(Struts2+Spring+Hibernate)打造一个在线网盘系统,本系列教程是从零开始,所以会详细以及着重 ...

  9. Android官方架构组件介绍之LiveData

    LiveData LiveData是一个用于持有数据并支持数据可被监听(观察).和传统的观察者模式中的被观察者不一样,LiveData是一个生命周期感知组件,因此观察者可以指定某一个LifeCycle ...

  10. Sublime 取消每次自动更新弹窗设置

    首选项 --> 设置-用户(英文版  :  "Preferences  - -> "Settings - user"") update_check ...