HTML5的新东西总结四:

1》video和audio
声明方法(可以制作背景音乐)
var oV/oA=new Video()/Audio();
oV/oA.src='';
oV/oA.play();

双标签声明:
<video src=""></video>
<audio src=""></audio>

属性:
a、src和poster poster:指定一张图片,当视频数据无效时显示(加载、地址错误等);
b、preload 是否预加载,默认为auto,还有none和metadata
c、loop 是否自动循环,布尔值属性
d、controls 显示播放控件
e、width和height
f、source标签 包含type(媒体类型的src) 默认为all

功能:
a、暂停 pause 播放 play
b、音量控制 volume+=0.1 volume-=0.1 (默认的值是0-1)
c、静音 muted 返回布尔值,true表示静音 false表示不静音
d、快进和快退 currentTime++ 快进 currentTime-- 快退
e、全屏 Video.webkitRequestFullscreen();
f、滚动条 事件Video.ontimeupdate 事件对象中含有 Video.currentTime 已经播放的时间 Video.duration 总时间
g、播放完毕 事件onended
h、当双击的时候(事件) ondblclick

2》动画
transition 过渡 用于简单的过渡动画
animation
定义:@keyframes name{
from/0%{ }
to/100%{ }
}
调用:animation:1s name linear/ease infinite forwards;

分写:
animation-name:name; 名称
animation-duration:4s; 时间
animation-timing-function:linear; 运动状态
animation-fill-mode:forwards; 最后状态
animation-iteration-count:infinite; 动画次数

分享一个css3动画特效库 animation.css 网址: https://daneden.github.io/animate.css/

3》地理位置
对象:navigator-geolocation

navigator-geolocation.getCurrentPosition(function(ev){alert('成功时包含ev事件对象,可以打印出来');ev.coords},function(ev){ev.code})

ev.coords:坐标
latitude——纬度
longitude——经度
accuracy——精确度,单位米
altitude——高度,单位米 海拔
altitudeAccuracy——高度的精确地,单位米
heading—运动的方向,相对于正北方向的角度 朝向
speed——运动的速度(假设你在地平线上运动),单位米/秒
accuracy >70 可用 精确度

ev.code的返回值:
1 用户拒绝
2 获取超时 网络问题
3 获取失败

实时获取地理位置:navigator.geolocation.watchPosition();
和定时器相同可以清除;
清除方法:navigator.geolocation.clearWatch();

HTML5和css3的总结四的更多相关文章

  1. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  2. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  3. Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  4. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  5. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

  6. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】

    <Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  7. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十九】

    <Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  8. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】

    <Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  9. (转)浅谈HTML5与css3画饼图!

    神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...

随机推荐

  1. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  2. Ettercap中间人攻击--介绍

    前言 Ettercap有四种界面:Text,Curses,GTK2,Daemonize. -T      命令行界面,只显示字符.通常与配套的参数有-q(安静模式),加上该选项,则不会显示抓到的数据包 ...

  3. SharePoint 如何找到List的Template ID

    在我们添加Ribbon操作,或者对特定模板进行操作的时候,经常需要ListTemplate的数值,我们经常需要搜索各种网页,来查找匹配的ListTemplate值,其实,有个比较简便的方法. 像定义R ...

  4. 高性能JS笔记2——数据存取

    数据存取性能而言: 字面量>本地变量>数组元素>对象成员 一.标识符解析的性能 标识符解析是有代价的,一个标识符的位置越深,它的读写速度也就越慢. 局部变量的读写速度是最快的,全局变 ...

  5. 2015年第13本(英文第9本):Murder on the Orient Express 东方快车谋杀案

    书名:Murder on the Orient Express 东方快车谋杀案 作者:Agatha Christie 单词数:6.1万 不重复单词数:不详 首万词不重复单词数:不详 蓝思值:640 阅 ...

  6. android webview 介绍

    在Android手机中内置了一款高性能webkit内核浏览器,在SDK中封装成名为WebView的组件. WebView使用: (1)添加权限:AndroidManifest.xml中必须使用许可&q ...

  7. JSP page指令详解

    JSP指令用来设置整个JSP页面相关的属性,如网页的编码方式和脚本语言. 语法格式如下: <%@ directive attribute="value" %> 指令可以 ...

  8. 【读书笔记】iOS-安全地传输用户密码的方法

    正确做法:事先生成一对用于加密的公私钥,客户端在登录时,使用公钥将用户的密码加密后,将密文传输到服务器.服务器使用私钥将密码解密,然后加盐之后多次请求MD5,之后再和服务器原来存储的用同样方法处理过的 ...

  9. 【原】训练自己的haar-like特征分类器并识别物体(3)

    在前两篇文章中,我介绍了<训练自己的haar-like特征分类器并识别物体>的前三个步骤: 1.准备训练样本图片,包括正例及反例样本 2.生成样本描述文件 3.训练样本 4.目标识别 == ...

  10. QA:Failed to deploy artifacts from/to snapshots XX Failed to transfer file Return code is: 405, ReasonPhrase:Method Not Allowed.

    QA: Failed to deploy artifacts from/to snapshots XX Failed to transfer file Return code is: 405, Rea ...