无线开发学习笔记

无线开发笔记

box-shadow: h-shadow v-shadow blur spread color inset
- box-shadow是整块的阴影，很像是一个独立的盒子
  
  如果是outside：默认是盒子的大小，h正值时向右移动，以此类推，如图：
  
  如果是inset：默认不显示，h正值时，内部向右扩展，如图：
- 阴影可叠加，用逗号隔开，相同配置的阴影会使颜色变深
- 如果div设置为圆形，则阴影也会变为圆形
- demo1
- demo2
- demo3
rgba形式的颜色写法，在color、background、gradient等地方都能用到
text-shadow: h-shadow v-shadow blur color;
- 可以认为是原文字的副本
- 用逗号可以同时展示多个文字阴影: demo
- 其中的color可以是rgba，如2px 2px 5px rgba(0,0,0,.5)，并且文字的透明度不影响text-shadow的展现
- JS中是textShadow
- 即使阴影的位置为初始值0（0 0 0 #fff），也会对文字效果产生影响：
- 文字展现的demo，效果如图
transition: property duration timing-function delay;
- 默认：all 0 ease 0
- 非整数的时间可以写成：.2s
- 监听属性变化，对<style>和js设置的css同时适用
- 可以用逗号隔开，监听多个属性的变化，如:transition:1s width ease,10s height ease
- 六种值
  - linear:匀速
  - ease：慢速-快速-慢速
  - ease-in：慢速-快速
  - ease-out：快速-慢速
  - ease-in-out：慢速-快速-慢速
  - cubic-bezier(n,n,n,n)
- 如果元素变为display:none，失效
- 对fontSize有效:demo
- JS事件transitionend
  
  不能这样加事件：
```
oDiv.ontranstionend=function(){
	alert(1);
}
```
  要这样写：
```
oDiv.addEventListener('transitionend', function(){
	oDiv.style.height = '300px';
}, false);
```
运动
- 定义
```
@-webkit-keyframes test{
	from{ width:300px; color:#000; background:#ccc;}
	to{ width:500px; color:#fff; background:red;}
}
```
- 属性
  - -webkit-animation-name —— WebkitAnimationName
    
    执行运动
  - -webkit-animation-duration —— WebkitAnimationDuration
  - -webkit-animation-timing-function —— WebkitAnimationTimingFunction
  - -webkit-animation-delay —— WebkitAnimationDelay
  - -webkit-animation-fill-mode —— WebkitAnimationFillMode
  - -webkit-animation-iteration-count:infinite;
    
    infinite：运动次数是无限，运动到终点后，直接跳回起点重新运动，好像没有包含动画外的动作
  - -webkit-animation-direction
    
    alternate：轮流反向播放
  - -webkit-animation-play-state:paused;
    
    运动暂停
- 完整的运动过程
```
起点 —— 终点（`100%`的点 / 原点）+ 动画时间外的状态（根据终点判定）
{           动画时间          } {        动画时间外         }
	```
```
- 颜色也可以渐变，比如从red变为blue
- 有两种运动的形式
  - transition: 1s all ease
    
    监听属性变化，属性变化时触发运动
  - animation
    - @-webkit-keyframes test {}
      
      定义属性的变化
    - -webkit-animation-name等
      
      执行运动
transform
- js设置
```
dom.style.WebkitTransform;
dom.style.MozTransform;
dom.style.MsTransform;
dom.style.OTransform;
dom.style.transform;
```
- 倾斜：skew
  
  资料：http://www.bbs0101.com/archives/248.html
- 位移：translate
  
  dom.offsetLeft 是不变的
- 缩放：scale
  
  dom.offsetWidth 是不变的
- 旋转：rotate
  
  rotate(45deg)的效果和rotateZ(45deg)效果一直
  
  是x/y/z轴自身旋转
- 原点：transform-origin
  
  默认是中心点
  
  关注center bottom的放大效果
  
  demo
渐变：gradient
- 写法：background:-webkit-linear-gradient(red,blue,yellow,green);
- 颜色写法
  - rgb
  - green...
  - #ccc...
- 更新起点
  - 支持right bottom式：background:-webkit-linear-gradient(right bottom,red,blue);
  - 支持deg式：background:-webkit-linear-gradient(-45deg,red,blue);
时间处理：(new Date()).toGMTString()
localstorage
选择器: querySelector
自定义属性
- dom.getAttribute('data-index')同dom.dataset.index
- dataset可以获取setAttribute的属性
- 性能上getAttribute更好，但差别并不大

表单

type有email、url、month、week、submit等

属性有 required 等

示例代码

<form action="http://www.baidu.com">
	email：<input type="email" name="email" required><br>
    url:<input type="url" name="url" required><br>
    date:<input type="month"><br>
    week:<input type="week"><br>
	<input type="submit">
</form>

<form action="http://www.baidu.com">
	number:<input type="number"><br>
    range:<input type="range"><br>
    date:<input type="date"><br>
	time:<input type="time"><br>
    email:<input type="email"><br>
    url:<input type="url"><br>
	<input type="submit">
</form>

audio

示例代码

<audio src="http://yinyueshiting.baidu.com/data2/music/123651506/536010151200128.mp3?xcode=2ae33064a9e679aac9d26d3be69ae122dbbfc4acb439db37" controls></audio>

<audio controls autoplay>
	<source src="xxx">
</audio>

<audio controls autoplay loop>
	<source src="xxx">
</audio>

vedio

示例代码
```
<video controls width="500">
	<source src="bbb.mp4">
    <source src="bbb.ogg">
</video>
```
video的dom对象，有以下方法：dom.pause()、dom.play()

有以下属性：dom.paused、dom.width
border-radius

发现一个特点，其值在50%+时，一个宽高相等的div，均呈现为圆形。

demo
canvas
- 获取canvas的dom元素dom
- 获取对象：gd = dom.getContext('2d')
- 划线：gd.lineTo(x, y) n次
- 设置线的颜色：gd.strokeStyle = 'blue'
- 设置线的宽度：gd.lineWidth = 10
- 设置填充颜色：gd.fillStyle = 'red'，且必须和gd.fill()搭配才能填充颜色
- 合并划线：gd.stroke()
可以实现如下效果:

demo
-webkit-box-reflect
- 写法：-webkit-box-reflect: below 5px -webkit-linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,1));
定位
- HTML5 Geolocation API是新增的地理位置应用程序接口。如果浏览器支持，且设备具有定位功能，就能够直接使用这个API来获取当前位置信息。
- 检测浏览器是否支持
```
function supportGeolocation() {
    return 'geolocation' in navigator;
}
```
- window.navigator.geolocation对象存在3个方法
  - getCurrentPosition 获取当前地理位置
    
    getCurrentPosition(successCallback, onError, options)
    
    第1个参数为获取当前地理位置信息成功时所执行的回调函数，第2个参数为获取当前地理位置信息失败时所执行的回调函数，第3个参数为一些可选属性的列表。其中，第2、3个参数为可选参数。
```
navigator.geolocation.getCurrentPosition(function(position) {
    //TODO 获取成功时的处理
    var timestamp = position.timestamp;
    var coords = position.coords;
    console.log(timestamp);
    console.log(coords);
}, function(error) {
    //TODO 获取失败时的处理
    console.log(error);
}, {
    maximumAge: 0
});
```
    第1个参数，在获取地理位置信息成功时执行的回调函数中，带有一个position参数，它是一个Geoposition对象。该对象有以下两个属性：
    
    timestamp属性，时间戳。
    
    coords属性，coords属性是一个Coordinates类型对象，包含下面这些属性：
```
1. accuracy 获取到的经度或纬度的精度（以米为单位）。
2. altitude 当前地理位置的海拔高度（不能获取时为null）。
3. altitudeAccuracy 获取到的海拔高度的精度（以米为单位）。
4. heading 设备的前进方向。用面朝正北方向的顺时针旋转角度来表示（不能获取时为null）。
5. latitude 当前地理位置的经度。
6. longitude 当前地理位置的纬度
7. speed 当前的前进速度（以米/秒为单位，不能获取时为null）。
```
    第2个参数，在获取地理位置信息失败时执行的回调函数中，带有一个error参数，它是一个PositionError对象。该对象有以下两个属性：
```
code属性，可能值：
1. 当属性值为1时，表示用户拒绝了位置服务，"User denied Geolocation"。
2. 当属性值为2时，表示获取不到位置信息，"Timeout expired"。
3. 当属性值为3时，表示获取信息超时错误。
message属性
message属性值为一个字符串，包含了错误信息，这个错误信息在我们开发和调试时非常有用。
```
    第3个参数是一个可选属性的列表，说明如下：
```
enableHighAccuracy属性，是否要求高精度的地理位置信息。
timeout属性，超时限制（单位为毫秒）。如果在该时间内未获取到地理位置信息，则返回错误。
maximumAge属性，对地理位置信息进行缓存的有效时间（单位为毫秒）。如果该值设为0，则每次都去重新获取地理位置信息。
```
  - watchPosition 监视位置信息
    
    使用watchPosition(successCallback, errorCallback, options)方法可以定期地获取用户地理位置信息。该方法使用方式与getCurrentPosition方法类似，这里就不再详细解释了。调用该方法会返回一个数字，这个数字与setInterval方法的返回值用法类似，可以被clearWatch方法使用，以停止对当前地理位置信息的监视.
  - clearWatch 停止获取位置信息
    
    使用clearWatch方法可以停止对当前用户地理位置信息的监视。用法如下：
```
navigator.geolocation.clearWatch(watchId);
```
    参数watchId为调用watchPosition方法时的返回值。

posted @ 2015-11-05 19:28 一扬阅读(167) 评论(0) 收藏举报

刷新页面返回顶部

一扬

无线开发学习笔记

无线开发笔记

公告