HTML5

手机触摸屏的JS事件

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件: 属性 实例1 实例2 演示地址:demo 请用手机访问测试

DNS预获取(dns-prefetch)

<link rel=”dns-prefetch” href=”http://a0.twimg.com”/> <link rel=”dns-prefetch” href=”http://a1.twimg.com”/> <link rel=”dns-prefetch” href=”http://a2.twimg.com”/> <link rel=”dns-prefetch” href=”http://a3.twimg.com”/> <link rel=”dns-prefetch” href=”http://api.twitter.com”/&g…阅读全文

屏蔽移动端浏览器滚动条

最近在做一个嵌入到app里的一个webapp页面,底部有一个菜单可以上下滑动显示隐藏,这种效果首先是考虑使用css的固定定位position:fixed,但是部分浏览器会有一个bug,就是说父层设置固定定位后位置发生变化后子元素不跟着父元素动,找了半天也没找到解决办法,后来发现使用positon:absolute绝对定位可以解决,但是问题又出现了,使用绝对定位在给盒子设置bottom:-200px为负值的时候页面会出现滚动条,给body设置高度和溢出隐藏都解决不掉,这不是逼我放大招么! 解决办法:屏蔽浏览器body的touchmove事件 document.body.addEventListe…阅读全文

android浏览器,使用canvas绘制图像重影的解决办法

android浏览器,使用canvas绘制图像重影的解决办法 现象:android4.0以上一部分手机的webview中,当canvas小于屏幕大小时,绘图时会出现重影,就是说一个图只绘制了一遍,却出现了两个 网上查找的解决方案1:根本没解决问题 canvas外层的div需要设定属性 style=”overflow:visble;-webkit-transform:translateZ(0);” 然后继续查找解决方案在http://www.360doc.com/content/14/0731/14/1045556_398354343.shtml 这里找到如下解决方案: …阅读全文

html5获取图片指定坐标色值

利用html5 getImageData()方法获取canvas画布上指定坐标色值方法如下: 通过这个方法可以实现diy试衣间相同尺寸的png透明图片用定位叠加到一起后鼠标划过判断选择了哪个层,通过对应层级遍历每一张图片指定坐标处的色值来计算,先找到有色值的图片,就说明是当前选中的图片!下面是我在一个项目里用到这个方法的一段代码: 演示地址:demo

HTML 5 Web Workers

web worker 是运行在后台的 JavaScript,不会影响页面的性能。 什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。 浏览器支持 所有主流浏览器均支持 web worker,除了 Internet Explorer。 检测 Web Worker 支持 在创建 web worker 之前,请检测用户的浏览器是否支持它: if(typeof(…阅读全文

html5 canvas 实现图片合成

前段时间在公司做了个服装diy的项目,用到了html5 canvas的图片处理功能,项目的实现方法是先用3d建模,把渲染的服装拆分成碎片,在用js、jquery、html5等技术对服装的碎片组合成一张图片,下面是项目中用到html5canvas图片合成的一个小案例分享给大家 演示地址:demo