这篇文章主要为大家详细介绍了不知道的几个HTML5新功能，为大家分享出更多不为人知的HTML5 API，感兴趣的小伙伴们可以参考一下当你在人群中谈论到“HTML5”，你也许会感觉到，自己像一位异域舞者或独角兽，来到屋子中间，带有明显的“我很酷，我知道它”的意味。这不能说我们虚荣，多少年来，基本的HTML API一直没有任何发展，以至于当有一个小的新功能出现时，例如placeholder，都会让我们露出新奇的眼神。尽管新式的浏览器中实现...
最近做项目需要用到图片上传与预览功能，由于是用于手机端，所以研究了下H5的实现方式。图片预览首先，解决图片预览问题。在html5中，提供了FileReader来读取本地文件，使我们可以实现图片预览功能。FileReader属性，所有属性都是只读的：FileReader.error，读取文件时，出现的DOMError。FileReader.readyState，读取状态；0，没有数据加载；1，数据正在加载；2，读取已经完成。FileReader.result，文件内容；该属性只在读取操作完...
这篇文章是HTML5系列文章中的第一篇。HTML5是网站运作所使用语言的第五次改版，我们随后会提供一份报告，详细介绍针对这种新的技术会产生怎样的新攻击方式。接着，我们还会仔细介绍HTML5对于网络世界以及网络犯罪份子来说，会有哪些好处、坏处，以及丑陋面。首先，HTML5（以及相关的API）并不像我们平时所熟悉的软件升级。这种技术实际上提供了很多新功能，每种功能都需要浏览器软件专门支持。这里有一篇详细的维基百科文章，介绍了...
这段时间一直在研究canvas，突发奇想想做一个可以截屏视频的功能，然后把图片拉去做表情包，哈哈哈哈哈哈~~制作方法：1.在页面中加载视频在使用canvas制作这个截图功能时，首先必须保证页面上已经加载完成了这个视频，这样才能够方便的对其操作。如果使用下面直接嵌入<video>标签的方式：<video loop controls id="testmp4" width="500" height="400" > <source src="test.mp4" type="video/mp4"> <source src="test.webm" typ...
一般的视频网站对于用户上传的视频，在用户上传完成后，可以对播放的视频进行截图，然后作为视频的展示图。项目中也可以引入这样的功能给用户一种不错的体验，而不是让用户额外上传一张展示图。效果图：看起来还是很不错，下面我给大家分析下，极其核心代码很简单：_canvas = document.createElement("canvas"); _ctx = _canvas.getContext("2d"); _ctx.fillStyle = #ffffff; _ctx.fillRect(0, 0, _videoWidth, _videoWidth)...
抽时间写了一个带有自动校验功能的Html5用户注册Demo。使用到Handlebars模板技术和手机验证码校验。以下是效果截图：1.页面代码：usersRegister.hbs<!DOCTYPE html> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> <head> <meta http-equiv="Content-Type...
在HTML5中，拖放是标准的一部分，任何元素都能够拖放，具体内容如下1、拖放 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); v...
拖拽是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖拽是标准的一部分，任何元素都能够拖拽。 Html5拖拽非常常见的一个功能，但是大部分拖拽的案例都是一个剪切的过程， 项目中需要实现Html5拖拽复制的功能，Html5拖拽复制很简单，只需要在普通Html5拖拽的过程中做一点小小的改动即可。ps: 本篇博文为非首页文章,只是简单的笔记。浏览器支持Internet Explorer 9FirefoxOpera 12ChromeSafari 5v1.0代码部分<!DOC...
前些日子为大家倾囊为大家分享了一些有关移动端的结构与标签的相关介绍，今天将继续为大家介绍的则是一个小小的功能，那就是移动端IOS系统收缩地址导航栏功能。 JavaScript代码// 它只有一个参数,该参数表示被调用的函数名(在页面加载完毕时执行的函数的名字)function addLoadEvent(func) {var oldOnload = window.onload;if (typeof window.onload != function) {window.onload = func;}else {window.onload = function() ...
在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉，大家都经常头疼怎么才能判断这横屏和竖屏的状态呢，今儿梦龙就为大家分享分享。 用CSS判断横屏竖屏问题。CSS代码如下 1、@media (orientation: portrait) { } 横屏@media (orientation: landscape) { }竖屏2、<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏<link rel="stylesheet" media="all and (orientation:l...
本文给大家介绍如何使用html5为输入框添加语音输入功能，实现方法很简单，需要的朋友参考下本文这里介绍的是大家以后要用到的html强大功能，可直接给输入框增加语音功能，下面我们先来看看实现方法。大家可以看到在输入框右边的麦克风图标，点击麦克风就能够进行语音识别了。其实很简单，语音识别是html5的基本功能，它的用法是<input type=”text” speech x-webkit-speech />如果喜欢XHTML类似的语法，可以这样表示<input type=”...
这里介绍的是大家以后要用到的html强大功能，可直接给输入框增加语音功能，下面我们先来看看实现方法。大家可以看到在输入框右边的麦克风图标，点击麦克风就能够进行语音识别了。其实很简单，语音识别是html5的基本功能，它的用法是<input type=”text” speech x-webkit-speech />如果喜欢XHTML类似的语法，可以这样表示<input type=”text” x-webkit-speech=”x-webkit-speech” />语音识别在十年前是让人觉得不可思议的事情，即...
在智能手机发展飞速的现在拖放功能已经成为一种时尚，但是在我们的浏览器上是不是还缺少这种方便快捷的功能?在HTML5的新标准中就有关于拖放的标准，作为Html5标准的一部分，任何元素都可以被拖放。一、浏览器支持情况Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。二、使用方法首先，为了使元素可拖动，把 draggable 属性设置为 true ：<img draggable="true" />然...
在HTML5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围...
由于前端是不能直接操作本地文件的，要么通过用户点击选择文件或者拖拽的方式，要么使用flash等第三方的控件，但flash日渐衰落，所以使用flash还是不提倡的。同时html5崛起，提供了很多的api操控，可以在前端使用原生的api实现图片的处理，这样可以减少后端服务器的压力，同时对用户也是友好的。最后的效果如下：这里面有几个功能，第一个是支持拖拽，第二个压缩，第三个是裁剪编辑，第四个是上传和上传进度显示，下面依次介绍每个...