H5
文章平均质量分 74
yzbben
这个作者很懒,什么都没留下…
展开
-
HTML5中input背景提示文字(placeholder)的CSS美化
之前在介绍HTML5的placeholder属性时,曾实现了一些页面例子让大家参考,但这些例子里的背景文字都是灰色的,样式很单一,其实它们可以做的更好看,CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。CSS代码在火狐浏览器中的写法和在谷歌浏转载 2016-09-14 15:14:09 · 3996 阅读 · 0 评论 -
HTML5 Canvas处理头像上传
最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到这些问题,最后我们选用Canvas来完成图像尺寸缩放和图片数据获取。等边处理头像一般都是正方形,首先我们需要获取图片宽度和高度的最小值,用该最小值作为边长居中裁剪图片,最终得到一个正方形的图片转载 2017-03-13 11:02:34 · 1817 阅读 · 0 评论 -
HTML5 5大存储方式总结
总体情况h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。主要应用:购物车、客户登录对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。目标解决4k的大小问题解决请求头常带存储信息的问题解决关系型存储的问题跨浏览器1.本地存储localstorage存储方式:转载 2017-03-13 09:35:03 · 357 阅读 · 0 评论 -
使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/转载 2017-02-13 11:59:47 · 721 阅读 · 0 评论 -
前端rem单位的正确使用姿势
原文 http://www.uizph.com/post-329.html主题 HTML写这篇文章是因为自己被rem这个坑绊过脚,因此特意去研究了下rem这个单位。简单阐述下px、em、rem之前的关系(其实网上很多,我这里稍微提一下)。先抛出一个问题:为什么要选择rem?px:像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所转载 2017-01-18 11:56:13 · 10914 阅读 · 0 评论 -
详解HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.举个例子说明:比如要预先加载某个页面,可以这样: XML/HTML Code 但如果是google的话,要用另外的一个名称,即: XML/H转载 2016-12-20 15:31:44 · 403 阅读 · 0 评论 -
使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度
本文转至:http://www.webhek.com/link-prefetch/不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等。我曾经介绍过本站上使用的一转载 2016-12-20 14:28:51 · 4919 阅读 · 0 评论 -
[译]知名Html5 Canvas Javascript库对比
原文 http://jo2.org/html5-canvas-libary-introduction/我一直在找一个Html5 canvas库,可以让我创建可交互的、带动画的UI界面。我的要求是:良好的 文档,支持与维护 ,因为我想在以后的项目里还能重用它可以轻松的创造 复杂的图形对象 (我的工程比较复杂,可不是一个简单的按钮那样的活儿),最好能支持分组和多层能帮我处理 用户转载 2016-12-28 15:42:59 · 515 阅读 · 0 评论 -
前端实现图片压缩上传
当项目中有图片上传功能时,便会产生服务器资源占用问题,为避免上传图片太大占用太多空间,需要将图片进行压缩之后再存储。图片压缩可以通过前端或者后端都可以实现,这里主要闲扯一下我使用的前端图片压缩: 这里介绍的js压缩图片的主要思想是:首先求出上传的图片大小,然后判断是否大于限制的最大size,若大于,则将图片进行压缩。压缩的过程就是,使用canvas将要压缩的图片画出来。转载 2017-01-04 16:39:44 · 5662 阅读 · 1 评论 -
移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实。所以理解的解决方案就是在上传先进行图片压缩,然后再把压缩后的图片上传到服务器。localResizeIMG,它会对图片进行压缩成你指定宽度及质量度并转换成base64图片格式,那么我们就可以把这个base64通过ajax传到后台,转载 2016-12-01 14:11:40 · 2121 阅读 · 0 评论 -
H5 data-* 属性,设置获取方法总结
HTML5 data-* 自定义属性1.设置方法A.直接在标签内书写,格式如下div id="test" data-age="24"> Click Herediv>B.用 js 设置var test = document.getElementById('test');test.dataset.my = 'Byron';2.获取方法var t转载 2016-11-29 09:46:29 · 6966 阅读 · 3 评论 -
移动前端—图片压缩上传实践
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法。目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现。所以直接在前端压缩图片,已经成了很多移动端图片上传的必备功能了。在移动端压缩图片并且转载 2016-11-28 17:46:23 · 1685 阅读 · 0 评论 -
HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用j转载 2016-10-27 16:33:34 · 292 阅读 · 0 评论 -
移动端开发不缩放
在html页面的头部加上使得移动端的设备不进行缩放,可以使用px单位写页面原创 2016-09-14 16:58:30 · 314 阅读 · 0 评论 -
手机端H5获取当前城市的方法
移动端的H5页面提供了定位的功能,那么如何实现一个最简单的需求-----获取用户当前城市?你可能搜一下就会找到N篇博客介绍,但是你会发现你看完大段代码之后还是没搞清楚,为了便于大家理解,我精简了代码,只保留了必要的部分。 1、在html页面引入百度地图API(文档地址:http://developer.baidu.com/map/wiki/index.php?title=j转载 2017-06-19 14:50:52 · 2033 阅读 · 0 评论