在前面学习了JS基础、DOM 和 BOM 的基本操作后,这部分主要学习这些知识的拓展应用
1、元素偏移量 offset 系列
1、offset 概述
offset
翻译过来就是偏移量,我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
1、获得元素距离带有定位父元素的位置
2、获得元素自身的大小(宽度高度)
3、注意:返回的数值都不带单位
offset 系列常用属性
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
<script>
// offset 系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移 位置 返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以带有定位的父亲为准 如果么有父亲或者父亲没有定位 则以 body 为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小 宽度和高度 是包含padding + border + width
console.log(w.offsetWidth);
console.log(w.offsetHeight);
// 3. 返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
</script>
</body>
2、offset 与 style 区别
1、offset
1、offset 可以得到任意样式表中的样式值
2、offset 系列获得的数值是没有单位的
3、offsetWidth 包含 padding+border+width
4、offsetWidth 等属性是只读属性,只能获取不能赋值
5、所以,我们想要获取元素大小位置,用 offset更合适
2、style
1、style 只能得到行内样式表中的样式值
2、style.width 获得的是带有单位的字符串
3、style.width 获得不包含 padding 和 border 的值
4、style.width 是可读写属性,可以获取也可以赋值
5、所以,我们想要给元素更改值,则需要用 style 改变
3、案例1:获取鼠标在盒子内部的坐标
1、分析
1、我们在盒子内点击,想要得到鼠标距离盒子左右的距离。
2、首先得到鼠标在页面中的坐标(e.pageX, e.pageY)
3、其次得到盒子在页面中的距离( box.offsetLeft, box.offsetTop)
4、用鼠标距离页面的坐标减去盒子在页面中的距离,得到鼠标在盒子内的坐标
5、如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动事件mousemove
2、代码
<body>
<div class="box"></div>
<script>
// 我们在盒子内点击, 想要得到鼠标距离盒子左右的距离。
// 首先得到鼠标在页面中的坐标( e.pageX, e.pageY)
// 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
// 用鼠标距离页面的坐标减去盒子在页面中的距离, 得到 鼠标在盒子内的坐标
var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
// console.log(e.pageX);
// console.log(e.pageY);
// console.log(box.offsetLeft);
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})
</script>
</body>
4、案例2:模态框拖拽
弹出框,我们也称为模态框。
1、点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。
2、点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。
3、鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。
4、鼠标松开,可以停止拖动模态框移动。
1、分析
1、点击弹出层,模态框和遮挡层就会显示出来 display:block;
2、点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;
3、在页面中拖拽的原理:鼠标按下并且移动,之后松开鼠标
4、触发事件是鼠标按下 mousedown,鼠标移动 mousemove 鼠标松开 mouseup
5、拖拽过程: 鼠标移动过程中,获得最新的坐标值赋值给模态框的left和top值,这样模态框可以跟着鼠标走了
6、鼠标按下触发的事件源是最上面一行,就是id 为 title
7、鼠标的坐标减去鼠标在盒子内的坐标,才是模态框真正的位置。
8、鼠标按下,我们要得到鼠标在盒子的坐标。
9、鼠标移动,就让模态框的坐标设置为:鼠标坐标减去盒子坐标即可,注意移动事件写到按下事件里面。
10、鼠标松开,就停止拖拽,就是可以让鼠标移动事件解除
2、代码
<body>
<div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名:</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码:</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
<script>
// 1. 获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. 点击弹出层这个链接 link 让mask 和login 显示出来
link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. 点击 closeBtn 就隐藏 mask 和 login
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. 开始拖拽
// (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠标移动的时候,把鼠标在页面中的坐标,减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px'; //给某个元素赋值必须使用style方法
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起,就让鼠标移动事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
2、元素可视区 client 系列
1、定义
client
翻译过来就是客户端,我们使用 client
系列的相关属性来获取元素可视区的相关信息。通过client
系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
2、案例:淘宝 flexible.js 源码分析
1、立即执行函数
立即执行函数是指函数定义好后,不需要调用直接执行。即一引入 JS 文件,则该函数自动执行。
语法:
(function() {})()
//或者
(function(){}())
//()写在里面和外面的区别
主要作用:
1、创建一个独立的作用域
2、避免了命名冲突问题
<body>
<script>
// 1.立即执行函数: 不需要调用,立马能够自己执行的函数
function fn() {
console.log(1);
}
fn();
// 2. 写法 也可以传递参数进来
// 1.(function() {})() 或者 2. (function(){}());
(function(a, b) {
console.log(a + b);
var num = 10;
})(1, 2); // 第二个小括号可以看做是调用函数
(function sum(a, b) {
console.log(a + b);
var num = 10; // 局部变量
}(2, 3));
// 3. 立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
</script>
</body>
2、pageShow 事件(重新加载页面触发)
下面三种情况都会刷新页面都会触发load 事件。
1、a标签的超链接
2、F5或者刷新按钮(强制刷新)
3、前进后退按钮
但是火狐中,有个特点,有个“往返缓存”,这个缓存中不仅保存着页面数据,还保存了 DOM 和 JavaScript 的状态;实际上是将整个页面都保存在了内存里。
所以此时后退按钮不能刷新页面。
此时可以使用 pageshow
事件来触发。,这个事件在页面显示时触发,无论页面是否来自缓存。在重新加载页面中,pageshow
会在 load
事件触发后触发;根据事件对象中的 persisted
来判断是否是缓存中的页面触发的pageshow
事件,注意这个事件给 window
添加。
3、淘宝flexible代码分析
(function flexible(window, document) {
// 获取的html 的根元素
var docEl = document.documentElement
// dpr 物理像素比
var dpr = window.devicePixelRatio || 1
// adjust body font size 设置我们body 的字体大小
function setBodyFontSize() {
// 如果页面中有body 这个元素 就设置body的字体大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
// 如果页面中没有body 这个元素,则等着 我们页面主要的DOM元素加载完毕再去设置body
// 的字体大小
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10 设置我们html 元素的文字大小
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize 当我们页面尺寸大小发生变化的时候,要重新设置下rem 的大小
window.addEventListener('resize', setRemUnit)
// pageshow 是我们重新加载页面触发的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面,也需要从新计算一下rem 的大小
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
3、元素滚动 scroll 系列
1、元素scroll 系列属性
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
2、页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll
事件。
获取页面被卷去的头部:
1、页面 被卷去的头部:可以通过 window.pageYOffset
获得,如果是被卷去的左侧 window.pageXOffset
2、注意,元素被卷去的头部是 element.scrollTop
,左侧 element.scrollLeft
3、案例:仿淘宝固定右侧侧边栏
需求:
1、原先侧边栏是绝对定位
2、当页面滚动到一定位置,侧边栏改为固定定位
3、页面继续滚动,会让返回顶部显示出来
要点:
1、需要用到页面滚动事件 scroll 因为是页面滚动,所以事件源是 document
2、滚动到某个位置,就是判断页面被卷去的上部值。
3、页面被卷去的头部:可以通过 window.pageYOffset 获得如果是被卷去的左侧 window.pageXOffset
4、注意,元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部则是 window.pageYOffset
5、其实这个值可以通过盒子的 offsetTop 可以得到,如果大于等于这个值,就可以让盒子固定定位了
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
//1. 获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function() {
// console.log(11);
// window.pageYOffset 页面被卷去的头部
// console.log(window.pageYOffset);
// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 当我们页面滚动到main盒子,就显示 goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
</script>
</body>
4、三大系列总结
1、对比
2、主要用法
1、offset
系列经常用于获得元素位置 offsetLeft
、offsetTop
2、client
经常用于获取元素大小 clientWidth
、clientHeight
3、scroll
经常用于获取滚动距离 scrollTop
、scrollLeft
4、注意页面滚动的距离通过 window.pageXOffset
获得
5、mouseenter 和 mouseover 的区别
1、当鼠标移动到元素上时就会触发 mouseenter
事件
2、类似 mouseover
,它们两者之间的差别是
1、mouseover
鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter
只会经过自身盒子触发
2、之所以这样,就是因为 mouseenter
不会冒泡
3、跟 mouseenter
搭配鼠标离开 mouseleave
同样不会冒泡
4、动画函数封装
1、动画实现原理
核心原理:通过定时器 setInterval()
不断移动盒子位置。 实现步骤:
1、获得盒子当前位置
2、让盒子在当前位置加上 1 个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意此元素需要添加定位position: absolute;
,才能使用 element.style.left
<body>
<div></div>
<script>
// 动画原理
// 1. 获得盒子当前位置
// 2. 让盒子在当前位置加上1个移动距离
// 3. 利用定时器不断重复这个操作
// 4. 加一个结束定时器的条件
// 5. 注意此元素需要添加定位, 才能使用element.style.left
var div = document.querySelector('div');
var timer = setInterval(function() {
if (div.offsetLeft >= 400) {
// 停止动画 本质是停止定时器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
}, 30);
</script>
</body>
2、动画函数简单封装
注意函数需要传递 2 个参数,动画对象和移动到的距离。
<body>
<div></div>
<span>夏雨荷</span>
<script>
// 简单动画函数封装obj目标对象 target 目标位置
function animate(obj, target) {
var timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
// 调用函数
animate(div, 300);
animate(span, 200);
</script>
</body>
3、动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数,每次都要 var
声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)。
核心原理:利用 JS 是一门动态语言,可以很方便的给当前对象添加属性。
举例
<body>
<button>点击夏雨荷才走</button>
<div></div>
<span>夏雨荷</span>
<script>
// var obj = {};
// obj.name = 'andy';
// 简单动画函数封装obj目标对象 target 目标位置
// 给不同的元素指定了不同的定时器
function animate(obj, target) {
// 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
// 调用函数
animate(div, 300);
btn.addEventListener('click', function() {
animate(span, 200);
})
</script>
</body>
4、缓动效果原理
之前讲的是匀速动画:
盒子当前位置 = 盒子当前位置 + 固定值
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
思路:
1、让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
2、核心算法:
每次移动的距离步长 = (目标值 - 现在的位置) / 10
3、停止的条件是:让当前盒子位置等于目标位置就停止定时器
4、注意步长值需要取整(往上取整)
举例:
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓冲动画核心算法
let step = Math.ceil((target - obj.offsetLeft) / 10);
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
5、动画函数多个目标值之间移动
可以让动画函数从 800 移动到 500。
当我们点击按钮时候,判断步长是正值还是负值:
1、如果是正值,则步长往大了取整(Math.ceil()
)
2、如果是负值,则步长向小了取整(Math.floor()
)
<body>
<button class="btn500">点击夏雨荷到500</button>
<button class="btn800">点击夏雨荷到800</button>
<span>夏雨荷</span>
<script>
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路:
// 1. 让盒子每次移动的距离慢慢变小, 速度就会慢慢落下来。
// 2. 核心算法:(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器
function animate(obj, target) {
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function() {
// 调用函数
animate(span, 500);
})
btn800.addEventListener('click', function() {
// 调用函数
animate(span, 800);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
</script>
</body>
6、动画函数添加回调函数
1、回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后, 再执行传进去的这个函数,这个过程就叫做 回调(callback
)。
2、回调函数写的位置:定时器结束的位置。
案例:
// 增加回调函数形参 callback
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓冲动画核心算法
let step = target - obj.offsetLeft;
// 左右移动步值正负处理
step = step >= 0 ? Math.ceil(step / 10) : Math.floor(step / 10);
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
// 判断,回调函数 callback 存在则调用
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
// 回调函数作为实参传入
animate(span, 800, function () {
span.style.backgroundColor = 'pink';
});
5、常见网页特效案例
1、轮播图案例
轮播图也称为焦点图,是网页中比较常见的网页特效。
功能需求:
1、鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
2、点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。
3、图片播放的同时,下面小圆圈模块跟随一起变化。
4、点击小圆圈,可以播放相应图片。
5、鼠标不经过轮播图,轮播图也会自动播放图片。
6、鼠标经过,轮播图模块,自动播放停止。
1.1 总体分析
1、因为 js 较多,我们单独新建 js 文件夹,再新建 js 文件,引入页面中。
2、此时需要添加 load 事件。
3、鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
4、显示隐藏 display 按钮。
1.2 动态生成小圆圈
1、核心思路:小圆圈的个数要跟图片张数一致
2、所以首先先得到 ul 里面图片的张数(图片放入 li 里面,所以就是 li 的个数)
3、利用循环动态生成小圆圈(这个小圆圈要放入 ol 里面)
4、创建节点 createElement('li')
5、插入节点 ol.appendChild(li)
6、第一个小圆圈需要添加 current 类
1.3 小圆圈的排他思想
1、点击当前小圆圈,就添加 current
类
2、其余的小圆圈就移除这个 current
类
3、注意:我们在刚才生成小圆圈的同时,就可以直接绑定这个点击事件了。
1.4 点击小圆圈滚动图片
1、此时用到 animate 动画函数,将 js 文件引入(注意,因为 index.js 依赖 animate.js 所以,animate.js 要写到index.js 上面)
2、使用动画函数的前提,该元素必须有定位
3、注意是 ul 移动而不是小 li
4、滚动图片的核心算法:点击某个小圆圈,就让图片滚动小圆圈的索引号乘以图片的宽度做为 ul 移动距离
5、此时需要知道小圆圈的索引号,我们可以在生成小圆圈的时候,给它设置一个自定义属性,点击的时候获取这个自定义属性即可。
1.5 右侧按钮功能
点击右侧按钮一次,就让图片滚动一张。
1、声明一个变量 num,点击一次,自增 1,让这个变量乘以图片宽度,就是ul 的滚动距离。
2、图片无缝滚动原理
3、把 ul 第一个 li 复制一份,放到 ul 的最后面
4、当图片滚动到克隆的最后一张图片时,让 ul 快速的、不做动画的跳到最左侧:left 为0
5、同时 num 赋值为0,可以从新开始滚动图片了
1.6 克隆第一张图片(无缝滚动)
1、克隆 ul 第一个 li.cloneNode() 加 true 深克隆复制里面的子节点(false:浅克隆)
2、添加到 ul 最后面 appendChild
1.7 点击右侧按钮,小圆圈跟随变化
1、最简单的做法是再声明一个变量 circle,每次点击自增1,注意,左侧按钮也需要这个变量,因此要声明全局变量。
2、但是图片有5张,我们小圆圈只有4个少一个,必须加一个判断条件
3、如果 circle == 4 就从新复原为 0
1.8 自动播放功能
1、添加一个定时器
2、自动播放轮播图,实际就类似于点击了右侧按钮
3、此时我们使用手动调用右侧按钮点击事件 arrow_r.click()
4、鼠标经过 focus 就停止定时器
5、鼠标离开 focus 就开启定时器
1.9 节流阀
1、功能:防止轮播图按钮连续点击造成播放过快。
2、原理:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。
3、思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
1、开始设置一个变量:var flag = true;
2、if(flag) {flag = false; do something}
:关闭水龙头
3、利用回调函数动画执行完毕:flag = true
打开水龙头
2、返回顶部案例
1、window.scroll
滚动窗口至文档中的特定位置:
window.scroll(x, y)
注意:
里面的 x 和 y 不跟单位,直接写数字。
2、带有动画的返回顶部
1、此时可以继续使用我们封装的动画函数
2、只需要把所有的 left 相关的值改为跟页面垂直滚动距离相关就可以了
3、页面滚动了多少,可以通过 window.pageYOffset 得到
4、最后是页面滚动,使用 window.scroll(x, y)
3、修改后的缓存动画函数
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 缓冲动画核心算法
let step = target - window.pageYOffset;
step = step >= 0 ? Math.ceil(step / 10) : Math.floor(step / 10);
if (window.pageYOffset === target) {
clearInterval(obj.timer);
callback && callback();
}
window.scroll(0, window.pageYOffset + step);
}, 30);
}
调用:
animate(window, 0);
3、筋斗云案例
1、效果
1、鼠标经过某个小 li,筋斗云跟着到当前小 li 位置
2、鼠标离开这个小 li,筋斗云复原为原来的位置
3、鼠标点击了某个小 li,筋斗云就会留在点击这个小 li 的位置
2、实现
1、利用动画函数做动画效果
2、原先筋斗云的起始位置是 0
3、鼠标经过某个小 li,把当前小 li 的 offsetLeft 位置做为目标值即可
4、鼠标离开某个小 li,就把目标值设为 0
5、如果点击了某个小 li,就把 li 当前的位置存储起来,做为筋斗云的起始位置
核心代码:
var current = 0;
for (var i = 0; i < lis.length; i++) {
// (1) 鼠标经过把当前小li 的位置做为目标值
lis[i].addEventListener('mouseenter', function() {
animate(cloud, this.offsetLeft);
});
// (2) 鼠标离开就回到起始的位置
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current);
});
// (3) 当我们鼠标点击,就把当前位置做为目标值
lis[i].addEventListener('click', function() {
current = this.offsetLeft;
});
}