JavaScript(三十七)——移动端、多媒体、CSS动画
目录
移动端基础
手机浏览器的内核是什么?
四大浏览器内核优缺点
视口viewport
rem
多媒体
视频格式
声音格式
CSS动画
CSS中的动画功能
移动端基础
大纲:视图、rem布局、媒体查询
手机浏览器的内核是什么?
产业概况:全球仅有四大浏览器内核
目前全球仅有四个独立的浏览器内核,分别为微软1E的Trident、网景最初研发后卖给Mozilla基金会并演化成火狐的Gecko., KDE的开源内核Webkit以及Opera(欧朋)的Presto。 其中,Presto是历史最悠久的内核。
具前微软的Trident在移动终端上主婴为WP7系统内置浏览器,Opera的Presto内 核在所有联网设备上都使用,移动终端上主要为Opera Mobile、OperaMini、 欧朋浏览器以及欧朋HD Beta版,Webkit内核的适用范围则较为广泛,Android原生浏览器、苹果的Safari、 谷歌的
Chrome(Android4.0使用)都是基于Webkit开源内核开发的。
四大浏览器内核优缺点
- 1.Trident:因为在早期IE占有大量的市场份额,所以以前有很多网页是根据这个Trident的标准来编写的,但是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug。
- 2.Gecko:优点就是功能强大、丰富,可以支持很多复杂网页效果和浏览器扩展接口,缺点是消耗很多的资源,比如内存。
- 3.Webkit:优点就是Webkit拥有清晰的源码结构、极快的渲染速度,缺点是对网页代码的兼容性较低,会使一些编写不标准的网页无法正确显示。
- 4.Presto: Presto内 核被称为公认的浏览网页速度最快的内核,同时也是处理JS脚本最兼容的内核,能在Windows、Mac及Linux操作系统下完美运行。
国内现在大多数都是基于Webkit开发的
视口viewport
移动端屏幕比pc端屏幕小很多,因此- - 个针对桌面设计的界面不一一定(或完全不)能很好的使用到移动端。所以,响应式来了!
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。
而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)。
两种像素
像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多,同一范围内能看到的内容就越多。或者说,当设备尺寸相同时,像素越密集,画面就越精细。
那么,当我们在 CSS 中为一个元素设置属性 width: 250px;
时,会发生什么?这个元素的宽度究竟是多少像素呢?
事实上,这里已经涉及了两种不同的像素:物理像素和 CSS 像素。
物理像素(设备像素,device pixels)
指的是设备屏幕的物理像素,任何设备的物理像素数量都是固定的。
CSS 像素(CSS pixels)
是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性(是否为高密度)以及用户进行的缩放,由浏览器自行换算。
在 Apple 的视网膜屏(Retina)中,每 4 个像素为一组,渲染出普通屏幕中一个像素显示区域内的图像,从而实现更为精细的显示效果。此时, 250px 的元素跨越了 500 个物理像素的宽度。
三种视口
移动端浏览器通常宽度是 240px~640px,而大多数为 PC 端设计的网站宽度至少为 800px,如果仍以浏览器窗口作为视口的话,网站内容在手机上看起来会非常窄。
因此,引入了布局视口、视觉视口和理想视口三个概念,使得移动端中的视口与浏览器宽度不再相关联。
- 布局视口(layout viewport)
一般移动设备的浏览器都默认设置了一个 viewport 元标签,定义一个虚拟的布局视口(layout viewport),用于解决早期的页面在手机上显示的问题。iOS, Android 基本都将这个视口分辨率设置为 980px,所以 PC 上的网页基本能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。
布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height
获取。
可以看到,默认的布局视口宽度为 980px。如果要显式设置布局视口,可以使用 HTML 中的 meta 标签:
<meta name="viewport" content="width=400">
布局视口使视口与移动端浏览器屏幕宽度完全独立开。CSS 布局将会根据它来进行计算,并被它约束。
- 视觉视口(visual viewport)
视觉视口是用户当前看到的区域,用户可以通过缩放操作视觉视口,同时不会影响布局视口。
视觉视口和缩放比例的关系为:
当前缩放值 = 理想视口宽度 / 视觉视口宽度
所以,当用户放大时,视觉视口将会变小,CSS 像素将跨越更多的物理像素。
- 理想视口(ideal viewport)
布局视口的默认宽度并不是一个理想的宽度,于是 Apple 和其他浏览器厂商引入了理想视口的概念,它对设备而言是最理想的布局视口尺寸。显示在理想视口中的网站具有最理想的宽度,用户无需进行缩放。
理想视口的值其实就是屏幕分辨率的值,它对应的像素叫做设备逻辑像素(device independent pixel, dip)。dip 和设备的物理像素无关,一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放,那么一个 CSS 像素就等于一个 dip。
例子:
<html><head><meta charset="utf-8" /><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div id="box"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div></div>
</body>
</html>
*{padding: 0;margin: 0;
}#box{margin: 0 auto;background-color: gray;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
#box div{width: 200px;height: 60px;line-height: 60px;text-align: center;}
运行结果:
例子:
HTML:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><ul id="list"><li class="cell1"><div></div><div></div></li><li class="cell2"><div></div><div></div></li><li class="cell3"><div></div><div></div></li><li class="cell1"><div></div><div></div></li> </ul><nav id="tab"><ul><li><a href="#">首页</a></li><li><a href="#">闪送超市</a></li><li><a href="#">购物车</a></li><li><a href="#">我的</a></li></ul></nav>
</body>
</html>
CSS:
*{padding: 0;margin: 0;
}#list{width: 100%;height: 80px;}
#list>li{display: flex;width: 100%;height: 80px;margin-bottom: 1px;
}
#list>li>div:nth-child(1){background-color: greenyellow;width: 25%;height: 100%;
}
#list>li>div:nth-child(2){background-color: royalblue;width: 75%;height: 100%;
}#tab{width: 100%;height: 50px;position: fixed;bottom: 0px;
}
#tab>ul{display: flex;height: 100%;/*justify-content: space-around;*/
}
#tab>ul>li{list-style: none;width: 25%;height: 100%;background-color: gray;text-align: center;line-height: 50px;
}
#tab>ul>li>a{text-decoration: none;font-size: 20px;
}
运行结果:
rem
rem说明:相对长度单位,相对于根元素(即html元素)font-size计算值的倍数。
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。
rem和px之间的换算:1rem === 16px
多媒体
Html4时代,刚页没有显示视频的一个标准,所以基本都要借助插件来实现视频的播放,插件过多或者插件自身问题,很容易引起浏览器的假死,造成用户体验不佳。
<embed src=“url">
为了创建更加丰富的web页面和web富应用,W3C在 htmI5中加入了多媒体video (视频)和audio (音频)标签和相关API,目标就是干掉fash这样的插件。
使用embed标签可以在网页中可放置MP3音乐、电影、flash动画等多媒体内容。
基本语法:
<embed src=“文件路径” width=value height=value hidden=hidden_value autostart=auto_value loop=loop_value> </embed>
语法解释:
- hidden设置播放面板的显示和隐藏,hidden_value有两个值:true(隐藏)和no(显示);
- autostart设置多媒体内容的播放方式, auto_value 有两个值:true(自动播放)和no(不自动播放);
- loop设定是否循环播放, loop_value有两个值:true(无限次循环播放)no(仅播放一次)。
视频格式
MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。
格式 | 文件 | 描述 |
---|---|---|
AVI | .avi | AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。 |
WMV | .wmv | Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。 |
MPEG |
|
MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。 |
QuickTime | .mov | QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。 |
RealVideo |
|
RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。 |
Flash |
|
Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。 |
Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。 |
声音格式
格式 | 文件 | 描述 |
---|---|---|
MIDI |
|
MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。 点击这里播放 The Beatles。 因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 |
RealAudio |
|
RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。 |
Wave | .wav | Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。 |
WMA | .wma | WMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。 |
MP3 |
|
MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。 |
例子:
注意:绝对路径:使用图片在硬盘上的绝对位置来访问图片,通常是从根目录开始,向下一个目录一个目录的寻找;在开发网页的过程中,一般不会使用绝对路径
<html><head><meta charset="utf-8"><title></title></head><body><audio id="music" src="music/周杰伦 - 稻香.mp3" ></audio><button onclick="playmusic()"> 播放 </button><button onclick="pause()"> 暂停 </button><script type="text/javascript">var music = document.getElementById("music") function playmusic(){
// music.autoplay = "autoplay";music.play();}function pause(){music.pause();}</script></body>
</html>
运行结果:
CSS动画
如何制作CSS动画:
- 转换transform
- 动画@keyframes规则,animation属性
- 过度transition
- RequestAnimationFrame
- setInterval
- 动画算子
- 动画库如jQuery封装,Velocity.js
CSS的transform属性:https://www.runoob.com/cssref/css3-pr-transform.html
例子:
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">div{width: 400px;height: 200px;background-color: deepskyblue;margin-bottom: 20px;}div:first-child{transform: scale(0.5);/*倾斜45度*/transform: skew(-45deg);}div:nth-child(2){/*水平方向移动距离,垂直方向移动距离*/transform: translate(100px,100px);}div:nth-child(3){/*旋转45度*/transform: rotateZ(45deg);}</style><body><div id="">afdgsdgsfgdf</div><div id="">按公司大股东</div><div id="">图图有条件</div></body>
</html>
运行结果:
例子:点击旋转图片
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">div{width: 400px;height: 200px;background-color: deepskyblue;margin-bottom: 20px;}</style><body><div id="a">afdgsdgsfgdf</div><button onclick="fun()">x轴</button><script type="text/javascript">var n = 0function fun(){var a = document.getElementById("a") n += 45a.style.transform = "rotate("+n+"deg)"console.log(n,a.style.transform)}</script></body>
</html>
运行结果:
CSS中的动画功能
CSS3中的动画分为Animations功能与Transitions功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果
1、Animations功能支持通过关键帧的指定来再页面上产生更复杂的动画效果
2、Transitions功能支持从一 个属性值平滑过渡到另一个属性值
例子:鼠标移动颜色渐变
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">div{width: 400px;height: 200px;background-color: deepskyblue;margin-bottom: 20px;/*改变的内容 改变时间 格式 延迟时间*/transition: background-color 2s linear 0s; }div:hover{background-color: red;}</style><body><div id="a"></div></body>
</html>
运行结果:
例子:
<style type="text/css">div{width: 400px;height: 200px;background-color: red;margin-bottom: 20px;}@keyframes mycolor{0%{background-color: deepskyblue;}25%{background-color: darkgoldenrod;}50%{background-color: green;}100%{background-color: blueviolet;}}div:hover{animation: mycolor 5s linear 0s;}</style>
例子:类似时钟指针转动
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">body{background-color: red;height: 100%;}#box{width: 200px;height: 200px;margin: 200px auto;border-radius: 50%;/*background-color: blue;*/border:2px solid white;position: relative;/*设置动画*/animation: run 2s infinite;}#box:before{content: "";display: block;width: 95px;height: 5px;/*border-radius: 50%;*/background-color: white;position: absolute;left: 50%;margin-left: 0px;top: 50%;margin-top: -2.5px;}/*动画效果*/@keyframes run{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}</style><body><div id="box"></div></body>
</html>
运行结果:
一起学习,一起进步 -.- ,如有错误,可以发评论
JavaScript(三十七)——移动端、多媒体、CSS动画相关推荐
- 黑客内参小讲堂三步实现滚动条触动css动画效果
现在很多网站都有这种效果,我就整理了一下,分享出来.利用滚动条来实现动画效果, ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 d ...
- Unity(三十七):3D模型动画、脚本控制模型骨骼IK动画
效果(左侧模型动画,右侧模型IK控制) 模型动画下载及导入 推荐模型动画下载链接地址 https://actorcore.reallusion.com/ Unity导入教程参见以下链接地址(需要科学上 ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放!
使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...
- css+动画优化,css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- html盒子移动动画代码,详解盒子端CSS动画性能提升
流畅动画的标准 理论上说,FPS 越高,动画会越流畅,目前大多数设备的屏幕刷新率为 60 次/秒,所以通常来讲 FPS 为 60frame/s 时动画效果最好,也就是每帧的消耗时间为 16.67ms. ...
- HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的) 程序员给大家留下的印象往往是代码的机器,整天写代码-程序员不懂爱!其实这是对程序员一种片面的看法.程序员固然 ...
- css animation 触发,在JavaScript中触发CSS动画
我不知道如何使用JQuery,因此我需要一种仅可以使用JavaScript触发动画的方法. 当用户滚动页面时,我需要调用/触发CSS动画. function start() { document.ge ...
最新文章
- C++的STL 栈 实现四则运算
- 生命真的源于宇宙吗?多名宇航员身体,都曾发生“不可逆”的变化
- 神经网络的核裂变模型
- 【手写系列】理解数据库连接池底层原理之手写实现
- LeetCode 1824. 最少侧跳次数(DP)
- 身上的WZSZF01重担开始减轻
- assert函数的作用
- wordpress 迁移网站更改域名解决图片无法显示
- Linux学习笔记---boot命令的使用
- Ubuntu14.04安装tomcat-9.0.1的教程
- 数据处理——数据编码
- 如何创建C语言的项目
- JanusGraph批量导入数据优化
- 使用PIL和OpenCV在PC上模拟动画OLED / LCD显示器
- c语言日历程序实验报告,万年历实验报告.doc
- wget不是内部命令 windows_wget 不是内部或外部命令 - 卡饭网
- 自动化专题讲座:作为自动化工程师,如何才能更好的承担社会责任?
- 机器学习常用小代码块
- 获取手机电池百分比和电池容量方法
- HTML5三屏合一的架构设计