移动页面加速google的AMP和百度的MIP简介

2017年09月10日 by 张 鑫旭 阅读 24526 次, 今日 13 次

google先出了个AMP – Accelerated Mobile Pages(加速的移动页面),后来百度仿照出了个MIP- Mobile Instant Pages – 移动网页加速器。那这些新技术对我们的产品收益有帮助吗?对我们产品开发有什么影响呢?

阅读全文…

使用canvas实现和HTML5 video交互的弹幕效果

2017年09月10日 by 张 鑫旭 阅读 51173 次, 今日 22 次

本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果,适合在个人博客或者运营页面,这种非视频场景使用;另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果,也就是真视频弹幕效果。

阅读全文…

iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览

2017年08月24日 by 张 鑫旭 阅读 35799 次, 今日 23 次

前端代码效果实时预览的需求实际上是非常常见的,传统做法是这样子的,会新建一个另外的独立页面,专门用来接收传入的前端代码,通过新开窗口或者嵌入iframe页面的方式达到最终效果,然而实际上,对于这个预览效果,如果代码是我们自己控制,而不是全权交给用户编辑的,是没有必要新建一个另外的预览页面,亦或者是在新窗口(新标签页)中浏览的。可以直接在当前页面构建一个文档上下文,实现更加方便快捷的预览。

阅读全文…

CSS百分比padding实现比例固定图片自适应布局

2017年08月17日 by 张 鑫旭 阅读 75399 次, 今日 51 次

对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的……

阅读全文…

HTML5按钮元素新属性formaction,formenctype等简介

2017年08月6日 by 张 鑫旭 阅读 30731 次, 今日 14 次

HTML5表单提交按钮新增加了formaction, formenctype等属性,这些属性是什么意思?有什么作用?本文就将通过一个个的案例带领大家去认识这些属性(共6个),以及在实际开发中的一些应用,希望能够对诸位的日常开发有所帮助。

阅读全文…

SVG <foreignObject>简介与截图等应用

2017年08月4日 by 张 鑫旭 阅读 45611 次, 今日 32 次

SVG图形表现非常给力,但是对于纯粹的文本展示却很吃力,例如希望文字到边缘可以自动换行,结果SVG却很难做到,对于XHTML而言这可以说是天生的理所当然的特性,那有没有什么办法让SVG元素中的文本也如同普通的HTML和CSS那样自动换行呢,有,那就是SVG的<foreignObject>元素!

阅读全文…

HTML5 file API加canvas实现图片前端JS压缩并上传

2017年07月30日 by 张 鑫旭 阅读 105882 次, 今日 37 次

很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇到因为图片大小限制而不能上传的窘境,不得不对图片进行再处理,而这种体验其实非常不好的。如果可以在前端进行压缩,就不会有这种尺寸限制的问题,自然用户体验就可以大大提升,非常具有价值!

阅读全文…

HTML5 indexedDB前端本地存储数据库实例教程

2017年07月20日 by 张 鑫旭 阅读 45506 次, 今日 31 次

HTML5 indexedDB和Web SQL Database都是本地数据库数据存储,Web SQL Database数据库要出来的更早,然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始,就已经注定Web SQL Database数据库是明日黄花。

未来一定是indexedDB的…

阅读全文…

借助Service Worker和cacheStorage缓存及离线开发

2017年07月12日 by 张 鑫旭 阅读 48809 次, 今日 24 次

html5 manifest缓存技术投入产出比有些低,因此不温不火,本文所要介绍的基于Service Worker和cacheStorage缓存及离线开发,套路非常固定,无侵入,且语言纯正,直接复制粘贴就可以实现缓存和离线功能,纯前端,无需服务器配合。一个看上去很酷的功能只要复制粘贴就可以实现,绝对是成本极低的,小白中的小白也能上手。

阅读全文…

了解JS中的全局对象window.self和全局作用域self

2017年07月6日 by 张 鑫旭 阅读 30744 次, 今日 14 次

在HTML5一些新特性出来之前,全局的self就是个没什么实用价值的半吊子。但是,随着HTML5一些新特性的到来,self开始慢慢登上正式的舞台…

阅读全文…