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
HTML5实现手机QQ表情功能的更多相关文章
- 【腾讯敏捷转型No.8】你爱上手机QQ了么?
上一篇文章<QQ邮箱如何利用敏捷做到中国第一>,“QQ邮箱之母”马化腾带领QQ邮箱团队,从流量思维向产品思维转变,“QQ邮箱之父”张小龙也是在这个敏捷转型过程中,剔除固有的成见,激发对优秀 ...
- 腾讯QQ表情为什么如此成功呢
本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:腾讯开发的QQ表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...
- 腾讯技术分享:GIF动图技术详解及手机QQ动态表情压缩技术实践
本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦.” 1.GIF格式的历史 GIF ( Gr ...
- html5调用手机摄像头,实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
- 手机QQ v4.2 有感
因为经常宅宿舍,很少出门,所以无论微信还是手机QQ都很少使用. 刚好最近见别人发来的表情我的2012自改版QQ总是无法解析,只能显示[吼叫].[啦啦]之类的字符,于是更新了v4.2的手机QQ把玩一番, ...
- 打破“中规中矩”,手机QQ何以萌翻众人?
随着移动互联网的迅猛发展,越来越多的手机应用展现在了用户面前,不过,面对林林总总的手机应用,有时候我们却提不起兴趣,因为功能的同质化,UI的千篇一律已经让我们多少有些审美疲劳的感觉. ...
- 腾讯技术分享:Android版手机QQ的缓存监控与优化实践
本文内容整理自公众号腾讯Bugly,感谢原作者的分享. 1.问题背景 对于Android应用来说,内存向来是比较重要的性能指标.内存占用过高,会影响应用的流畅度,甚至引发OOM,非常影响用户体验.因此 ...
- QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
随机推荐
- 基于Token的身份验证--JWT
初次了解JWT,很基础,高手勿喷. 基于Token的身份验证用来替代传统的cookie+session身份验证方法中的session. JWT是啥? JWT就是一个字符串,经过加密处理与校验处理的字符 ...
- 【巷子】:关于Apply、call、bind的详解
call方法: 语法:call(thisObj,'',''........) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 说明:call方法可以用来代替另一个对象调用一个方法.call方法 ...
- Yii2 高级模板不使用Apache配置目录,将前后台入口移到根目录
刚刚入手Yii2高级模板不久,部署项目时,得部署2个应用,个人感觉很繁琐,就将前后台入口文件全部拿到项目根目录.但是一看,完了,出错了!找教程找不到,还是自己解决吧 为了以后好升级,不改变Yii2核心 ...
- Gitlab邮箱配置
一些动作会自动发邮件,比如合并代码等 未验证
- Centos6.5安装JDK环境
1,系统版本查看 2,下载jdk1.8 wget http://download.oracle.com/otn-pub/java/jdk/8u144-b01/090f390dda5b47b9b721c ...
- 南京网络赛B-The writing on the wall
30.43% 2000ms 262144K Feeling hungry, a cute hamster decides to order some take-away food (like frie ...
- 介绍一个Redis的WEB 客户端
http://webd.is/ $ git clone git://github.com/nicolasff/webdis.git $ cd webdis$ make$ ...
- stark - 数据列表
一.效果图 二.数据列表 知识点: 完成(list_display)(list_display_links) 1.根据str,拿字段对象,取中文 val = self.model._meta.get_ ...
- Django框架【基础篇】
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...
- centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节课
centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节 ...