06-Web APIs

Web APIs 06

---

---

前情回顾

案例详解-仿京东放大镜

过渡(CSS3) transition

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片


在CSS3里使用transition可以实现补间动画(过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

过渡语法格式

transition: 要过渡的属性 花费时间 运动曲线 多久以后开始;

说明: 可以有多组属性变化，用"逗号"隔开。

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

如果想要所有的属性都变化过渡， 写一个all 就可以
transition-duration 花费时间 单位是 秒s 也可以是毫秒ms 他们之间的关系是 1s=1000ms
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始

运动曲线示意图如下：

注意: 过渡效果只能产生从某个值到另外一个具体的值的过渡, 比如display:none就不能过渡为dipslay:block

ontransitionend 事件

该事件会在DOM元素 CSS transition 结束后触发。 如果在transition完成前设置 display 为"none"，事件不会被触发。

/*
 * 在指定的元素上监听transitionend事件, 例如#slidingMenu
 * 然后指定一个函数, 例如 showMessage()
 */
function showMessage() {
    console.log('Transition 已完成');
}

var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);

举例:

1. 快递单号输入内容时,上面的大号字体盒子(con)显示
2. 同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容
3. 如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子
4. 注意:keydown和keypress在文本框里面的特点:他们两个事件触发的时候,文字还没落入文本框中
5. keyup事件触发的时候,文字已经落入文本框里面了
6. 当我们失去焦点,就隐藏这个con盒子
7. 当我们获取焦点,并且文本框内容不为空,就显示这个con盒子

案例-淘宝无缝轮播图

轮播图也称为焦点图，是网页中比较常见的网页特效。

无缝轮播图分析

• 一打开就显示随机设置网页背景颜色,并且把十六进制颜色值显示在页面中;
  并且每隔一秒,自动改变网页背景颜色以及十六进制颜色值

需求

功能1: 点击右侧按钮一次，就让图片滚动一张
功能2: 点击右侧按钮,小圆圈跟随变化
功能3: 实现左侧按钮功能
功能4: 被点击小圆圈高亮,并且滚动到对应图片
功能5: 点击某个小圆圈,再点击左侧按钮或右侧按钮,解决图片跟小圆点对应不上问题
功能6: 自动播放功能(鼠标移上轮播图层以后停止定时器,鼠标移出轮播图层以后重新开启定时器)
功能7: 防止轮播图左右按钮连续点击造成播放过快,添加节流阀功能

手动触发事件

// 手动触发指定DOM对象的指定事件 // 语法一 // DOM对象.事件类型()
可以手动触发传统绑定以及addEventListener绑定的事件 oDiv.click();

// 语法二 可以手动attachEvent方式监听的事件
//调用document对象的createEventObject方法得到一个event的对象实例。 var event =
document.createEventObject(); //触发oDiv上绑定的自定义事件onclick
oDiv.fireEvent(‘onclick’, event);

// 语法二 可以手动attachEvent方式监听的事件
//调用document对象的createEventObject方法得到一个event的对象实例。 var event =
document.createEventObject(); //触发oDiv上绑定的自定义事件onclick
oDiv.fireEvent(‘onclick’, event);

举例：

节流阀(节流函数) 见下篇

目标:防止轮播图按钮连续点击造成播放过快。
节流阀目的:当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路:利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

开始设置一个变量

var flag= true;
if(flag){
    flag = false;// 关闭水龙头
    do something
}       
利用回调函数动画执行完毕， 
flag = true;     //打开水龙头

结语

个人学习笔记，如有错解，劳烦指正