最近在做一个移动端HTML5的应用，使用到了上传功能，起初使用传统的上传方式上传手机拍照的照片，由于手机拍照出来的照片一般都是好几MB，所以上传速度是非常慢的。在网上找了很久找到了localResizeIMG压缩框架，感觉非常的实用，所以在此分享给大家。 第一步：下载localResizeIMGlocalResizeIMG放在github中的，地址是：https://github.com/think2011/localResizeIMG。 第二步：在web工程中导入localResizeIMG相关js 解压loca...
本文给大家介绍如何使用html5为输入框添加语音输入功能，实现方法很简单，需要的朋友参考下本文这里介绍的是大家以后要用到的html强大功能，可直接给输入框增加语音功能，下面我们先来看看实现方法。大家可以看到在输入框右边的麦克风图标，点击麦克风就能够进行语音识别了。其实很简单，语音识别是html5的基本功能，它的用法是<input type=”text” speech x-webkit-speech />如果喜欢XHTML类似的语法，可以这样表示<input type=”...
上一篇，我已经模仿as，加入了LBitmap和LBitmapData类，并且用它们实现了静态图片的显示。这次用Sprite来动态显示图片。依然遵循上一篇对显示对象的处理的思路，添加LSprite类，并追加show方法，如下：function LSprite(){ var self = this; self.type = "LSprite"; self.x = 0; self.y = 0; self.visible=true; self.childList = new Array() } LSprite.prototype = { show:function (cood){ if(cood==null)cood={x:0...
在HTML5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围...
实现多文件拖拽上传的简易Node项目，可以在github上下载，你可以先下载下来：https://github.com/Johnharvy/upLoadFiles/。解开下载下的zip格式包，建议用webstom 运行该项目，通过app.js启动项目,如果提示找不到node.exe执行环境，请指定好你的node.exe安装位置。这里我用的express框架是3.21.2版本。我们来简单介绍下拖拽效果是怎么实现的。这里先看代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="j...
一、前言文件上传是一个比较常见的功能，传统的选择方式的上传比较麻烦，需要先点击上传按钮，然后再找到文件的路径，然后上传。给用户体验带来很大问题。html5开始支持拖拽上传的需要的api。nodejs也是一个最近越来越流行的技术，这也是自己第一次接触nodejs，在nodejs开发中，最常用的开发框架之一是expess，它是一个类似mvc模式的框架。结合html5、nodejs express实现了拖拽上传的功能。二、基础知识普及1、NodeJs基础知识nodej...
HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能，只要获取到网页所在窗口对象的实例，不仅仅同源(域+端口号)的web网页之间可以互相通信，甚至可以实现跨域通信。浏览器支持程度：IE8+，firefox4+，chrome8+ opera10+1. 首先，要想接收从其他的窗口发过来的消息，就必须对窗口对象的message事件进行监听，如下代码：window.addEventListener(“message”, function(){},false);2. 其次，需要使用window对象的...
History是有趣的，不是吗？在之前的HTML版本中，我们对浏览历史记录的操作非常有限。我们可以来回使用可以使用的方法，但这就是一切我们能做的了。但是，利用HTML 5的History API，我们可以更好的控制浏览器的历史记录了。例如：我们可以添加一条记录到历史记录的列表中，或者在没有刷新时，可以更新地址栏的URL。为什么介绍History API ？在这篇文章中，我们将了解HTML 5中History API的来源。在此之前，我们经常使用散列值来改变...
之前在拓扑上的应用都是些静态的图元，今天我们将在拓扑上设计一个会动的图元——叶轮旋转。先看看最后我们实现的效果：http://www.hightopo.com/demo/fan/index.html我们先来看下这个叶轮模型长什么样从模型上看，这个叶轮模型有三个叶片，每一个叶片都是不规则图形，显然无法用上我们HT for Web的基础图形来拼接，那么我们该怎么做呢？很简单，在HT for Web中提供了自定义图形的方案，我们可以通过自定义图形来绘制像叶片这种不规...
目录图片放大镜效果在线演示 源码原理首先选择图片的一块区域，然后将这块区域放大，然后再绘制到原先的图片上，保证两块区域的中心点一致, 如下图所示:初始化 获得 canvas 和 image 对象，这里使用 标签预加载图片, 关于图片预加载可以看这里var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var img = document.getElementById("img");设置相关变量// 图片被放大区域的中心点，也是...
回复内容： 打开 vs code ，打开 devtools ，然后把它的 caret 效果扒走。你可以搞一个div用来模拟光标但是这需求是什么鬼！模拟输入框，输入框用div，光标可以用after，css3实现闪烁。 如此就不存在键盘弹出的一系列问题。textRange是IE独占的API吧…………你是怎么在移动端调用它的？最快速的解决方法是把产品经理宰了......世界清静了！反人类的做法；其实更有必要重新考虑下这个需求是为了什么。这么折磨自己何必呢。前几...
回复内容： 可以, 不仅理论上可以, 实际上也可以.问题在于你愿意为此花多大的精力, 于是我想起了一张图:图片引用于互联网.图片引用于互联网.正是因为移动设备普及后，做设计配适的工作量急剧增大，因此在实践领域出现了相应的“响应式布局”理念，也就是说根据设备的尺寸区别，页面会动态地作出响应并改变网站本身的布局。原理上说大概就是根据设备尺寸自动计算出网页上不同板块的尺寸和位置。例如这个网站利用了“液态设计”的技术...
比如在页面A中点开了一个折叠列表（用jquery做的），并且向下拖动了一点滚动条，然后通过列表中的某个按钮跳转到了页面B，B页面中有一个goback按钮，点击一下就能跳回页面A，跳回页面A时，滚动条保持在之前离开时的状态，并且之前打开的那个折叠列表也要是保持打开的。有哪些html5 API或jquery API可以实现吗？ps：我试了jquery 中的history.back()，可以实现滚动条位置不变，但是折叠列表变成了初始状态（也就是说和刷新了页面一样...
回复内容： 答案是可以。实现基本步骤：操作摄像头，获取图片。技术要点：MediaStream、GetUserMedia、File api。利用canvas使用相关算法分析图片识别图片得出结果。技术要点：getImageData* 涉及到的技术点浏览器们（包括移动端）支持各异，现阶段要开发并投产还不太现实。比如MediaStream的支持情况：http://caniuse.com/#feat=stream* 识别算法是一个难点，不过谢谢github，谢谢开源社区，@Shou Jiesong 的答案中有phonegap的插...
回复内容： 写过一些纯H5的APP，虽然开发起来的确很快很舒服，但和原生比起来纯H5APP还是有很多问题，主要聚集在以下几个方面： 1、动画动画有很多种，比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等，在H5之下的众多实现方法都没有办法达到纯原生的性能。一般这些的话有几种不同的选择：css3动画，javascript动画，原生动画。css3动画非常的消耗性能，如果某一个元素用到css3动画可能还看不出来，但大面积...