Html5
Wang's Blog
Keep learning for the innovation era.
展开
-
HTML5中与类相关的扩充classList
在html5中所有的元素都会有一个classList属性,这个classList属性时新集合DOMTokenList的实例。与其他DOM属性类似,DOMTokenList有一个表示自己包含多少元素的length属性,而要取得每个元素,可以使用item()方法。此外这个新类型还定义了其他方法:add,contains,remove,toggle 下面来举例说明:html 结构:<div clas原创 2016-04-23 14:32:25 · 915 阅读 · 0 评论 -
React 实现 2D 画板功能
在移动端或者PC端我们来模拟画板的实现, 支持清除和导出功能,此处简单实现,仅作开发参考。效果演示 主要代码演示/* 此模块用于实现签名绘图功能 */// 需要用到的变量定义let clickX = new Array();let clickY = new Array();let clickDrag = new Array();let paint;let point...原创 2018-10-07 14:54:48 · 3785 阅读 · 0 评论 -
React 实现 iphone 上的小圆点的拖拽功能
在移动端或者PC端我们来模拟拖拽功能的实现效果演示 Github地址https://github.com/johnnynode/iphone-drag-button支持平台移动端PC端主要代码演示/* 拖动功能 */// 初始化宽高let oW,oH;let oLeft = 0;let oTop = 0;let htmlWidth = documen...原创 2018-10-06 22:50:44 · 1215 阅读 · 0 评论 -
网页视频播放的常见兼容方式总结
在做一些项目时,项目需求竟然要兼容IE6, 一开始并没有合适的解决方案,后来查看了优酷的处理方式,这是一种好的方式,根据不同的浏览器来使用video或object, 我们都知道object的兼容性很好,但是很老,下面我们来进行总结一下:方式一:根据浏览器判断使用不同的标签处理html部分:<div id="videoContainer"></div>javascript: var flag原创 2017-11-06 14:13:22 · 2643 阅读 · 0 评论 -
ionic中滑动缩放的焦点图特效实现
在之前项目整理中,实现过这样一个特效:当用手指滑动时,焦点图随着滑动的距离而成比例的缩放的效果,常见于一些App上,主要是用于展示信息的卡片,相关技术栈版本,ionic1, angular1, 这里再来说一下:技术栈不同,但实现的思路是想通的,仅供开发参考。效果预览这里由于gif生成工具生成的图片很大,没有展示全部的功能,demo上可以切换不同类型的杂志以及一些切换的特效,并且如果是在线的图片,代码原创 2017-09-11 20:40:35 · 2054 阅读 · 4 评论 -
HTML5 入门介绍
HTML5 介绍篇经历了8年的历程,终于在2014年10月29日这天,HTML5标准规范正式制定下来了,那么HTML5到底是什么,与之前的版本有什么不同,我们今天会在这里探讨一下。HTML5并不仅仅扩充了一些新的标记,它也不仅仅是HTML,它是一系列技术的集合HTML,CSS,JAVASCRIPT,应该这样说,HTML5是一个构建WEB应用程序的解决方案。HTML5可以用于开发桌面应用程序,移动端应原创 2016-04-20 19:22:00 · 789 阅读 · 0 评论 -
HTML5中的智能表单
新增类型 在html5中给表单新添加了一些类型 ,大致可以分为以下几种:数字类型跟数字强相关的类型,其中number、range在移动端开发时,会弹出数字键盘,而range是一个范围滑动块。 <input type=number> <!--用于比较精确的纯数字输入类型--><input type=range> <!--用于不是很精确的数字范围--><input type=tel> <!--原创 2016-04-24 17:04:29 · 2589 阅读 · 0 评论 -
HTML5触摸界面的程序设计
在移动端屏幕中,我们需要做的不只是和处理PC端网页那样,处理简单的点击事件或者其他桌面事件。我们需要更多的了解一下移动端的触摸事件和手势。——整理自《HTML5触摸界面设计与开发》移动端浏览器基于webkit 引擎的浏览器 webkit 是一个非常强大的引擎,也是第一代iphone获得成功的一个原因。webkit 起源于名为Konqueror的开源浏览器引擎,苹果将它开发为webkit,作为s原创 2016-04-28 19:46:37 · 1366 阅读 · 0 评论 -
HTML5中的数据集dataset和自定义属性data-*
在html5中可为所有元素添加一种自定义的属性,这种属性的前缀以data-开头,比如:data-name,目的是为元素提供与页面渲染无关,但与dom元素强相关的属性。添加完自定义属性后我们可以通过元素的dataset属性来访问其值。dataset与getAttribute/setAttribute的对比在此之前的访问属性的方式我们用getAttribute/setAttributehtml 结构:原创 2016-04-24 15:00:01 · 4982 阅读 · 0 评论 -
在react中 实现 base64的图片转换成formdata格式并实现上传功能
如果不想要服务端实现处理base64格式的图片的转换,那么在浏览器端来实现,部分属于伪代码,仅作为开发参考,请勿直接拷贝使用原创 2018-10-07 15:52:47 · 8480 阅读 · 0 评论