js►webAPI

06-动画,短路运算,轮播图,offset,scroll,client,classList,移动端事件

动画函数封装

实现div到left=400的位置

1
点击按钮，让div能够移动到400的位置，到达终点，清除定时器

让div做多个动画

1
2
3
点击按钮1，让div能够移动到400的位置，到达终点，清除定时器
点击按钮2，让div能够移动到800的位置，到达终点，清除定时器
还要让div能够从800 移动到400的位置，到达终点，清除定时器

div到达终点

1
让div移动到96px的位置，发现元素不能移动到终点位置

清除多个定时器

1
点击元素多次，会发现元素会左右来回移动，到达不了终点。

短路运算

&&：短路与， 只要碰到了false，就会短路，短路后不会执行第二个表达式。

||：短路或，只要碰到了true就会短路，短路后不会执行第二个表达式。

注意：&&和||的结果不一定是布尔类型，也可以是其他的类型

||经常用来给函数设置默认值

轮播图

简单轮播图

1
2
3
1. 结构分析
2. 按钮高亮以及排他
3. 移动图片：渐渐的移动图片，用到animate函数

左右焦点图

1
2
3
1.结构分析
2.左右箭头的显示与隐藏
3.点击左箭头与右箭头（下标判断）

无缝轮播图

1
2
1. 需要添加假图片
2. 真图片与假图片之间互相切换。

完整版轮播图

1
2
3
4
5
6
1. js动态添加小圆点
2. js动态添加最后一张假图片
3. 实现左右焦点图 + 无缝滚动
4. 自动播放
5. 点击小圆点同步切换
6. 解决点击小圆点的bug

三大家族

offset家族

offset系列用于用于获取元素自身的大小和位置，在网页特效中有广泛应用

offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop

offsetHeight与offsetWidth

  1. 获取的是元素真实的高度和宽度
  2. 获取到的是数值类型，方便计算
  3. offsetHeight与offsetWidth是只读属性，不能设置。

offsetHeight与offsetWidth的构成

​ offsetHeight = height + paddnig + border

​ offsetWidth = width + padding + border

offset

scroll家族

scroll家族用来获取盒子内容的大小和位置

scroll家族有：scrollWidth、scrollHeight、scrollLeft、scrollTop

  1. scrollWidth与scrollHeight是盒子内容的真实的宽度和高度。与和盒子大小无关，仅仅与盒子的内容有关系。
  2. scrollTop用于获取内容垂直滚动的像素数。如果没有滚动条，那么scrollTop值是0

scroll

onscroll事件，对于有滚动条的盒子，可以使用onscroll注册滚动事件，每滚动一像素，就会触发该事件。

1
2
3
4
var box = doucment.getElementById(“box”);
box.onscroll = function(){
	// 事件处理程序
}

获取页面被卷去的高度和宽度

通常来说，scroll家族用的最多的地方就是用来获取页面被卷去的宽度和高度，非常的常用

页面被卷去的高度和宽度

1
2
3
4
window.onscroll = function() {
  var scrollTop = window.pageYOffset
  var scrollLeft = window.pageXOffset
}

client家族

client家族用于获取盒子可视区的大小

client家族有clientWidth、clientHeight、clientLeft、clientTop

clietnWidth: 获取内容和padding的大小

clientHeight:获取内容与padding的大小

clientTop与clientLeft

clientTop与clientLeft 完全没有用，他们就是borderTop与borderLeft

client1

三大家族对比

client

onresize事件：onresize事件会在窗口被调整大小的时候发生。

1
2
3
4
5
window.onresize = function(){
	// 事件处理程序
    var width = window.innerWidth;
    var height = window.innerHeight
}

类名操作

推荐：classList是一个集合，会存储某个元素上所有的类名，使用classList来替代className操作class类

1
2
3
4
5
6
7
8
//添加类
node.classList.add("classname");
//移除类
node.classList.remove("classname");
//切换类
node.classList.toggle("classname");
//判断类
node.classList.contains("classname");

移动端

touch事件

移动端新增了4个与手指触摸相关的事件。

1
2
3
4
// touchstart:手指放到屏幕上时触发
// touchmove:手指在屏幕上滑动式触发（会触发多次）
// touchend:手指离开屏幕时触发
// touchcancel:系统取消touch事件的时候触发,比如电话

每个触摸事件被触发后，会生成一个event对象，event对象中changedTouches会记录手指滑动的信息。

1
2
3
e.touches;// 当前屏幕上的手指
e.targetTouches;// 当前dom元素上的手指。
e.changedTouches;// 触摸时发生改变的手指。(重点)

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下

1
2
clientX / clientY: // 触摸点相对浏览器窗口的位置
pageX / pageY:     // 触摸点相对于页面的位置