随笔分类 - HTML5/CSS3
摘要：临时接到一个紧急的需求，一个活动页面，在某台iPhone 5S设备上无法播放音频，其它设备均正常。我接到这个任务时，也是一脸懵逼，试过在audio标签上添加controls属性来显示audio，结果发现在界面触发事情里，无计怎么调用audio对象的play方法都没有用，但是一旦激活audio标签后，就可以调用play、pause方法 - - 最后搜索了一下，找到一个解决方案： fu...
阅读全文
摘要：坑点： 1) iOS 9.1 的safari中，在onTouchBegan方法中调用cc.audioEngine.playEffect播放音效是没有效果的，如果在onTouchEnded调用则是正常的，使用addTouchEventListener来播放也是正常的； 解决方案：在第一次addTouchEventListener回调方法里调用cc.audioEngine.playEffect()...
阅读全文
摘要：* { -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}input,textarea { -webkit-touch-callout: default !important; -webkit-user-selec...
阅读全文
摘要：昨天吐槽了cocos2d-js的问题，所以就准备调研几个其它HTML5引擎，发现PIXI性能极高，但是没有音频。而Phaser.js是在PIXI.js的基础之上进行的封装。而国内有一家公司，开发一个叫青瓷的引擎（QICI），看上去还蛮不错的，所以准备拿过来调研。看它的文档时，发现视频无法加载，调出控
阅读全文
摘要：在华为4.4的设备上，发现H5做的一款小游戏不能播放声音，用cocos2d-js的可以正常播放。手机的UA标识： Mozilla/5.0(Linux;U;Android 4.3; zh-cn;HUAWEI B199 Build/HuaweiB199) AppleWebKit/534.30(KHTML,link Gecko) Version/4.0 Mobile Safar...
阅读全文
摘要：最近在使用朋友网(不加链接，避免有打广告的嫌疑)，发现会出现提示“是否允许网站显示桌面通知？”，如下图所示： 这种做法，在页面加载完时直接调用请求，比起开心网的这种提示感觉有些野蛮了。开心网的桌面通知提示如下： 先检查用户是否已经允许了本站的桌面通知，在未允许的情况下：点击后Chrome才出现提示，感觉更人性化一些，起码这个通知出现是由用户主动触发的。 这两个网站，发现桌面通知主要用...
阅读全文
摘要：在做一个小应用的时候，给一个面板设置了透明度(opacity:.9)，在浏览页面的时候，发现滚动条居然透明了，如下图所示： 然后想是不是可以使用自定义来解决这个问题，找到这篇文章--《不用装扩展也可自定义Chrome滚动条的样式》 ::-webkit-scrollbar-track-piece{ background-color:#fff; -webkit-border...
阅读全文
摘要：在使用Google+的时候，查看某一相册，会经常看到，如下图所示的动画效果。 鼠标移入、移出时均有动画效果，咋一看估计是使用了css3的transform属性来实现动画效果的。 在网上搜索“Google+ 相册 效果”的时候发现有人使用CSS3做了这样的效果，不过使用调试工具查看节点元素的时候，我觉得它是使用JS在进行的控制。所以就用JS顺手写了一个，只是demo，可能还需要改进。 实...
阅读全文
摘要：http://www.circlehack.com/ (qiang外)是facebook四个工程师通宵一晚上的成果，体验和效果上和Google+中的circle相比还是逊色一些 整个源代码在github上https://github.com/voloko/facebook-circles circlehack.com中的示例截图(都是使用CSS3来画圈)： Google+的示例截图(使用图片+Ca...
阅读全文
摘要：效果比较简单，没有放满各个时刻（网上这类例子很多） 这里有一点取巧：画完外圈圆、内圈圆后，将原点（默认为0,0）转换为圆的中心点，这样的话，只需要知道角度，在已知时针、分针、秒针它的长度情况下，很容易求出对应的坐标(x, y) 在求的时候需要注意的是，先要将得到的弧度 – 1/2*Math.PI，以时针为例，一圈分为12个刻度，那么1个小时对应的弧度为 hour * 30 * Math.PI / ...
阅读全文
摘要：关于HTML5的基础，前一二年就已经有很多人写过很好的文章了。 HTML5-Canvas 关于HTML5 Canvas的基础教程 (原文HTML5 canvas - the basics) 在一些不支持flash的设备中，如果要使用网页需要对一些图表数据进行展示，Canvas能帮上大忙。 比如需要将股票价格的走势支持ipad、iphone等移动设备的访问，有一个基于prototype的插件可以满足...
阅读全文
摘要：HTML5中的存储分为三部分(FF中还提供了globalStorage，但不支持web sql database)： 1、SessionStorage 2、LocalStorage 3、Web SQL Database 它们与Cookie最大的不同之处在于，cookie在向后台发送每一个http请求的时候都会出现在http头部，而html5的本地存储则不会，某种程度上讲是节约了一定的带宽，缩短...
阅读全文
摘要：判定自定义属性的使用，网上有很多相关的介绍，主要点有两个： 1、如何判定浏览器是否支持此属性 2、如何兼容各浏览器 首先第一个问题，比较简单，直接使用dom.dataset，如果“===”undefined则不支持 如何在设置自定义数据属性时，兼容各浏览器的操作。我在写测试例子的过程时，发现一些问题（与属性的命令有关）： HTML的测试代码如下： <!DOCTYPE html><html> <he...
阅读全文
摘要：Geolocation API用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许” or “拒绝”。 先看看哪些浏览器支持Geolocation API： IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+ 也就是说除IE6~...
阅读全文
摘要：说到File API，比如有意思就是图片上传了。国外有一个网站叫min.us 用户只需要把图片拖到网页面中，然后自己进行排序就OK了，很方便。 下面是关于它的一段介绍视频： 目前网页上传分为三种： 1、form提交 2、flash上传 3、插件上传 各有利弊，fomr提交就是没进度条，不太好取消。flash比较难搞的就是在非ie中浏览器认为flash是新窗口会话，当前网页的cookie无法传递到f...
阅读全文
摘要：Node.js就不介绍了(如果你写JavaScript，就应该知道它) 以前看到过很多关于node.js的文章，但一直没有尝试去搭建node.js的环境。这里有一篇文章叫“websocket与node.js的完美结合” 看完那篇文章，依旧没有什么头绪，决定还是step by step… 在笔记本上跑东西就是比较吃力（况且还是低配置~），就懒得去开虚拟机了，决定直接用xp。 关于windows下安装...
阅读全文
摘要：History API在各浏览器下的支持情况： 不支持 4.0+ 5.0+ 8.0+ 不支持 比较典型的是GitHub，在点击代码文件夹和文件时，会发现它的url地址栏变换了、标题栏变化了、前进后退按钮也变化了（跟新开了一个新页面感觉一样），但体验起来很平滑（外层框架的内容没有重新加载，例如：登录信息、是否关注主人等），然后是ajax载入新内容。 history在HTML4的时代里，有如下几个方法...
阅读全文
摘要：Message API最大的优势是跨域发送消息。关于Message更多的信息请参考： http://www.w3.org/TR/html5/comms.html#dom-messageevent-initmessageevent https://developer.mozilla.org/en/DOM/window.postMessage Message中一般常用的属性： 1、data 包含传入的...
阅读全文
摘要：该特性仅支持：FF3.5+、Opera 10.6+、Chrome 3+、Safari 4。 详情请参数（下面的参考链接中都有例子说明）： https://developer.mozilla.org/En/Using_web_workers https://developer.mozilla.org/En/DOM/Worker http://www.whatwg.org/specs/web-work...
阅读全文
