html5
曾经沧海难为水-除却巫山不是云
这个作者很懒,什么都没留下…
展开
-
移动端网页实现拨打电话功能的几种方法
采用url链接的方式,实现在safari ios,android 浏览器,webos 浏览器,塞班浏览器,ie,operamini等主流浏览器,进行拨打电话功能。1.最常用的方式:复制代码代码如下:报警!在拨号界面,显示号码,并提示拨打。支持大部分的浏览器,但是在qq浏览器上支持不好。2、自动探测电话号码如果要支持safa原创 2015-08-24 14:49:52 · 40375 阅读 · 1 评论 -
精选6款神奇的HTML5 Canvas动画特效
——authored by 李家优在HTML5的Canvas画布上,我们基本可以实现和Flash相同的功能,但是HTML5的优点是通信方便,所以随着浏览器的升级,我们现在已经很习惯利用HTML5来制作动画和游戏了。下面我们精选了6款神奇的HTML5 Canvas动画特效,分享给大家。1、HTML5鲸鱼动画 又一款超酷HTML5动画之前看到过同样效果的一款鲸鱼动画,不过可惜原创 2014-03-14 09:14:52 · 4724 阅读 · 1 评论 -
8款最新超酷HTML5/CSS3特效及源码
1、CSS3/jQuery全屏立体焦点图 时尚大气jQuery是一个非常流行的Javascript框架,今天我们要分享一款基于jQuery和CSS3的焦点图动画,该jQuery焦点图插件是全屏立体的效果,看上去非常时尚和大气。而且,焦点图在图片滑动的时候非常流畅,性能应该也还不错。在线演示 源码下载2、HTML5/CSS3文字投影特效 乳白阴影文字效果原创 2014-03-13 10:03:09 · 3553 阅读 · 0 评论 -
javascript判断机器是否联网的2种方法
只有机器已经联网以后,web应用才能启动,下面使用javascript判断机器是否联网,具体判断代码如下,有此需求的朋友可以参考下。在很多场景下,只有机器已经联网以后,web应用才能启动。如果没有联网,就会提示错误。但是机器有时候要重启。 如果机器重启后,立刻启动web应用的话,可能,机器上的网络服务还没有准备好。特别是windows7,启动网络服务需要好几秒,这个时候怎么办呢?之原创 2014-11-26 17:48:20 · 830 阅读 · 0 评论 -
7款HTML5/CSS3应用新鲜出炉 功能强大实用
1、HTML5/CSS3发光文字 可自定义文字色彩 效果很赞前几天我已经向大家分享了两款HTML5/CSS3文字特效,尤其是这款HTML5 Canvas字母文字颗粒动画 可设置重力感应,更是动感。今天要分享的这款HTML5/CSS3文字效果也十分帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色。在线演示 源码下载2、HTML5/C原创 2014-03-13 09:44:11 · 1462 阅读 · 0 评论 -
利用canvas制作图片(可缩放和平移)+相框+文字
前言: 公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对于开发过webApp的朋友来做到这个很简单。下面来看代码1,思路 首先我们需要准备素材,一个相框和一个相片,然后我们要思考,只是把他们和并且就可以了吗?答案是否定的,我还需要对照原创 2015-03-17 15:02:03 · 4522 阅读 · 0 评论 -
浅谈HTML5的Camera API
通过Camera API能够用你的设备的摄像头拍照并上传到当前网页。通过使用input标签,设置type=”file”,accept属性设置为能接收图像,就能够实现前面的要求了。HTML代码如下:1input type="file" id="take-pictur原创 2015-09-30 11:11:37 · 1934 阅读 · 0 评论 -
HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明。 localStorage 是 HTML5 本地存储的原创 2015-11-09 12:21:11 · 35327 阅读 · 0 评论 -
巧用transform实现HTML5 video标签视频比例拉伸
前言原文地址曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法。因为强制给video标签设置width和height的话只会将video的显示区域拉伸,但是里面的视频还是保持原始比例,怎么调都没用:因为当我横向拉伸时:当我纵向拉伸时:2016-09-21 11:15:40 更新:感谢 @RileyRen 提原创 2016-12-28 09:57:07 · 4058 阅读 · 1 评论 -
纯JavaScript实现HTML5 Canvas六种特效滤镜
纯JavaScript实现HTML5Canvas六种特效滤镜小试牛刀,实现了六款简单常见Html5Canvas特效滤镜,并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js。支持的特效滤镜分别为:1.反色2.灰色调3.模糊4.浮雕5.雕刻6.镜像原创 2016-12-20 09:36:03 · 6775 阅读 · 0 评论 -
用canvas实现图片滤镜效果
原图demo:[html] form, input {width: 73px;height: 27px;} form { position: relative; float: left; margin: 0 10px 0 0; } #up-button{ position: ab原创 2016-12-20 09:37:30 · 2865 阅读 · 0 评论 -
7个很有用的HTML5学习资源
——edit by 李家优虽然HTML5还是很新,没有被所有主要浏览器支持,但现在还是有许多设计师和开发人员使用。毫无疑问,几年下来,HTML5将对web开发起着很重要的作用。我注意到很多人都在使用它,但也有许多人还没有接触过HTML5。为了帮助学习这个任务,我们收集了7个有用的HTML5学习资源。一、HTML5开发者指南这个文档举例说明了如何编写HTML5文档,为初学者提供了原创 2014-03-17 18:34:29 · 1075 阅读 · 0 评论 -
HTML5雨滴特效,晶莹剔透
HTML5雨滴特效img { display: none; }body { overflow: hidden; }#canvas { position: absolute; top: 0px; left: 0px; }function demo() {var engine = new RainyDay('canvas','demo1', window.innerWidth, wi原创 2014-05-04 15:18:29 · 2990 阅读 · 0 评论 -
基于canvas将图片转化成字符画
字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢?HTML5让这个可能变成了现实,通过canvas,可以很轻松实现这个功能。其实原理很简单:扫描图片相应位置的像素点,再计算出其灰度值,根据灰度值的大小,分别用字符#*+“和空格来填充。下面是源码:HTML:一个canvas元素#cv,一个字符画容器#txt 。fuck iecss:由于每一行用p来填充,所以p的原创 2014-08-12 19:56:53 · 1664 阅读 · 0 评论 -
前端性能优化究极宝典
(1)减少网络传输的消耗在低速网络下,带宽是网络性能的最大瓶颈,在网络速率一定的情况下,请求、响应的数量、大小直接影响页面响应的时间。一次页面请求响应中,有 10%~20% 的响应时间花在下载 HTML 文档上,其余 80%~90% 时间花在页面的组件上。CSS、JS、图片等资源都会增加 HTTP 请求数,减少这些元素的数量、大小就能减少响应时间。(2)减少 DOM 元素数原创 2015-02-04 20:27:15 · 691 阅读 · 0 评论 -
移动端网页站点调用拨打电话发送短信等功能
1. 打电话在android的浏览器中,如果电话号码是 XXX-XXX-XXXX的型式的话,用户点击的时候,拨号面板会激活,但是如果不是这一特定的格式,那么拨号功能是不会启动的。其实可以通过链接的方式激活拨号面板。(1) IPhone的写法[phone_number] 就是电话号码了phone_number复制代码例子:1234567原创 2015-07-15 13:13:14 · 5907 阅读 · 0 评论 -
那些过目不忘的 H5 页面
从引爆朋友圈的H5小游戏《围住神经猫》,到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》,从2014下半年起,各种H5游戏和专题页纷纷崭露头角。“H5”,这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计,通过一些案例分析来谈谈设计思路与方法,希望与大家进行交流探讨。 功能与目标 首先从功能与设计目原创 2015-03-18 09:44:56 · 4299 阅读 · 0 评论 -
将画布(canvas)图像保存成本地图片的方法
之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单。但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢?其实,这个方法也是非常简单的,几乎不用额外的编程知识。但我们可以更完美些,下面我将使用canvas2image.js,base64.js这两个脚本实现更强大的canvas->图片->本地的过程。在下面的方框内你原创 2015-03-16 17:33:58 · 9473 阅读 · 0 评论 -
android内置浏览器不支持websocket的解决方法
为了实现移动客户端实时通信,拟采用安卓webview内嵌html实现方式开发app,通信则采用最新的html5新特性websocket实现。经测试,android4.0以下内置浏览器都不支持websocket特性。经过google后,发现以下方案可以解决:使用web-socket-js(采用flash实现websocket的替代方案)既然内置浏览器不支持websocke原创 2015-02-04 10:59:45 · 7999 阅读 · 0 评论 -
jquery的websocket插件
WebSocket是HTML5一种新的协议。顾名思义,它在服务器和浏览器之间建立了全双工通信,避免了传统的轮询。它也由于ajex,无需发送请求,服务器可以主动传输数据给客户端。jquery好像没有官方的插件,但可以从http://code.google.com/p/jquery-websocket/下到名为jQuery Web Sockets Plugin v0.0.1的插件。要使用此原创 2015-02-04 09:20:48 · 6075 阅读 · 0 评论 -
总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
[html]view plaincopyspanstyle="font-size:14px;border:0px;margin:0px;padding:0px">HTMLspan>,从HTML文档的开始到结束排列:metaname=”viewport”content=”width=device-width,initial-scale=1.0原创 2015-01-22 15:18:43 · 914 阅读 · 0 评论 -
HTML5 LocalStorage 本地存储
HTML5LocalStorage本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示:最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以原创 2014-10-11 16:44:10 · 643 阅读 · 0 评论 -
Windows 下安装node-canvas
1.先安装 Python; 通过Python 官网 http://www.python.org/getit/ 下载并安装最新版本. 然后将Python 的安装目录(如: C:\Program Files\Python) 添加到PATH环境变量中;2.安装node-gyp 或将 npm 升级到内含 node-gyp 的版本 (nodejs v0.6.13以上的 npm 已内置了node-原创 2014-08-13 00:18:48 · 3470 阅读 · 0 评论 -
Canvas与Image互相转换示例代码
JS Canvas与Image互相转换原文演示:JavaScript Canvas Image Conversion Demo在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以10亿美元的天价卖给了FaceBook。我不介意赚取一些外快,所以我决定创建一个Instagram样式的应用原创 2014-08-12 22:09:58 · 1928 阅读 · 0 评论 -
IndexedDB入门
IndexedDB介绍IndexedDB标准是HTML5官方认可的本地数据库解决方案。其目的不是取代服务器端数据库,它在一些特定场景下很有用:创建自给自足的离线应用比如页面可以在有网络连接的时候从服务器端数据库获取所需要的数据,然后将数据保存到本地数据库,以便离线时访问。优化性能一些应用使用大量的数据,如果持续地在需要原创 2017-04-12 12:37:08 · 667 阅读 · 0 评论