7. PC端网页特效
声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：
- H5C3+移动布局： 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩
- JavaScript系列 ：JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）
文章目录
-
- 1. 元素偏移量offset 系列
-
- 1.1 offset 概述
- 1.2 offset 与style 区别
- 2. 元素可视区client 系列
- 3. 元素滚动scroll 系列
-
- 3.1 元素scroll 系列属性
- 3.2 页面被卷去的头部
- 3.3 页面被卷去的头部兼容性解决方案
- 4. 三大系列总结
- 5. mouseenter 和mouseover的区别
- 6. 动画函数封装
-
- 6.1 动画实现原理
- 4.2 动画函数简单封装
- 4.3 动画函数给不同元素记录不同定时器
- 4.4 缓动效果原理
- 4.5 动画函数多个目标值之间移动
- 4.6 动画函数添加回调函数
- 4.7 动画函数封装到单独JS文件里面
1. 元素偏移量offset 系列
1.1 offset 概述
offset 翻译过来就是偏移量，我们使用offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位
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>
1.2 offset 与style 区别
<body>
<div class="box" style="width: 200px;">div>
<script>
// offset与style的区别
var box = document.querySelector('.box');
console.log(box.offsetWidth);
console.log(box.style.width); //style只能得到行内样式表的样式值
// box.offsetWidth = '300px'; //offsetWidth是只读属性，只能获取不能赋值
box.style.width = '300px'; //style.width可以赋值
script>
body>
案例：获取鼠标在盒子内的坐标
<body>
<div class="box">div>
<script>
// 我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。
// 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
// 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
// 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标
var box = document.querySelector('.box');
//如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件mousemove
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})
script>
body>
案例：模态框拖拽
任务需求：弹出框，我们也称为模态框。
- 点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。
- 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
- 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
- 鼠标松开，可以停止拖动模态框移动。
案例分析
①点击弹出层，模态框和遮挡层就会显示出来display:block;
②点击关闭按钮，模态框和遮挡层就会隐藏起来display:none;
③鼠标按下触发的事件源是最上面一行，就是id 为title，触发事件是鼠标按下mousedown, 之后鼠标移动mousemove，最后松开鼠标mouseup
④在页面中拖拽的原理：鼠标移动过程中，获得最新的值赋值给模态框的 left 和 top 值，这样模态框可以跟着鼠标走了
⑤对于模态框的更新坐标的计算：首先鼠标按下，我们可以得到鼠标在页面中的坐标，根据偏移量可以求出按下鼠标时模态框的坐标，两者相减得到鼠标在盒子中的坐标(x, y)，由于在移动过程中，鼠标在盒子中的坐标不变，因此鼠标在页面中的坐标减去鼠标在盒子内的坐标，就是模态框真正的位置（注意移动事件写到按下事件里面。）
⑥鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除
<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'; //一定要记得加上单位
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move);
})
})
script>
body>
2. 元素可视区client 系列
client 翻译过来就是客户端，我们使用client 系列的相关属性来获取元素可视区的相关信息。通过client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。（client 宽度和高度 和 offsetWidth 最大的区别就是 不包含边框）
案例：淘宝flexible.js 源码分析：
立即执行函数：(function() {})() 或者 (function(){}())
主要作用：创建一个独立的作用域。避免了命名冲突问题
<script>
// 1.立即执行函数: 不需要调用，立马能够自己执行的函数
// 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>
load 与 pageshow的特点和区别
下面三种情况都会刷新页面都会触发load 事件。
- a标签的超链接
- F5或者刷新按钮（强制刷新）
- 前进后退按钮
但是火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和 JavaScript的状态；实际上是将整个页面都保存在了内存里。
所以此时后退按钮不能刷新页面。此时可以使用pageshow事件来触发。
这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加。
(function flexible(window, document) {
// 获取的html 的根元素
var docEl = document.documentElement
// dpr 物理像素比,pc端是1，移动端是2
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 系列
3.1 元素scroll 系列属性
scroll 翻译过来就是滚动的，我们使用scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
3.2 页面被卷去的头部
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll 事件。
<body>
<div>
我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内 容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
div>
<script>
// scroll 系列
var div = document.querySelector('div');
console.log(div.scrollHeight);
console.log(div.clientHeight);
// scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll', function () {
console.log(div.scrollTop);
})
script>
body>
案例：仿淘宝固定右侧侧边栏
1.原先侧边栏是绝对定位
2. 当页面滚动到一定位置，侧边栏改为固定定位
3. 页面继续滚动，会让返回顶部显示出来
案例分析：
①需要用到页面滚动事件scroll 因为是页面滚动，所以事件源是document
②滚动到某个位置，就是判断页面被卷去的上部值。
③页面被卷去的头部：可以通过window.pageYOffset 获得，如果是被卷去的左侧window.pageXOffset
④注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部则是window.pageYOffset
⑤其实这个值可以通过盒子的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 () {
// 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>
3.3 页面被卷去的头部兼容性解决方案
需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
- 声明了DTD，使用document.documentElement.scrollTop
- 未声明DTD，使用document.body.scrollTop
- 新方法window.pageYOffset 和window.pageXOffset，IE9 开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候getScroll().left
4. 三大系列总结
他们主要用法：
- offset系列经常用于获得元素位置offsetLeft offsetTop
- client 经常用于获取元素大小clientWidth clientHeight
- scroll 经常用于获取滚动距离scrollTop scrollLeft
- 注意页面滚动的距离通过window.pageXOffset 获得
5. mouseenter 和mouseover的区别
当鼠标移动到元素上时就会触发mouseenter 事件，类似mouseover，它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
- mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡
跟mouseenter搭配鼠标离开mouseleave 同样不会冒泡
<body>
<div class="father">
<div class="son">div>
div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('mouseenter', function() {
console.log(11); //经过子盒子时不会发送11
})
script>
body>
6. 动画函数封装
6.1 动画实现原理
核心原理：通过定时器setInterval() 不断移动盒子位置。
实现步骤：
- 获得盒子当前位置（获取位置用div.offsetLeft）
- 让盒子在当前位置加上1个移动距离（更改位置用div.style.left）
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用element.style.left
<body>
<div>div>
<script>
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>
4.2 动画函数简单封装
注意函数需要传递2个参数，动画对象和移动到的距离。
<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>
一定要注意给相应元素加定位！！
4.3 动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要var 声明定时器，比较消耗内存空间。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
<body>
<button>点击夏雨荷才走button>
<div>div>
<span>夏雨荷span>
<script>
// 简单动画函数封装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.4 缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
- 核心算法：(目标值- 现在的位置) / 10 做为每次移动的距离步长
- 停止的条件是：让当前盒子位置等于目标位置就停止定时器
- 注意步长值需要取整
还是在之前的代码基础上进行修改：
<body>
<button>点击夏雨荷才走button>
<span>夏雨荷span>
<script>
function animate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面（这里要注意！）
var step = (target - obj.offsetLeft) / 10;
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 调用函数
animate(span, 500);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
script>
body>
4.5 动画函数多个目标值之间移动
可以让动画函数从800 移动到500。当我们点击按钮的时候，判断步长是正值还是负值
- 如果是正值，则步长往大了取整（ceil）
- 如果是负值，则步长向小了取整（floor）
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);
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
4.6 动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置。
function animate(obj, target, callback) { //函数再多一个参数，该参数为函数类型
// console.log(callback); callback = function() {} 调用的时候 callback()
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
if (callback) {
// 调用函数
callback();
}
// callback && callback(); 简写
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
btn800.addEventListener('click', function () {
// 调用函数，这里传入了一个回调函数，会等animate函数结束后再执行调用
animate(span, 800, function () {
// alert('你好吗');
span.style.backgroundColor = 'red';
});
})
4.7 动画函数封装到单独JS文件里面
因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。
- 单独新建一个JS文件。
- HTML文件引入JS 文件。
<script src="animate.js">script>
引用animate.js案例制作：
<body>
<div class="sliderbar">
<span>←span>
<div class="con">问题反馈div>
div>
<script>
// 1. 获取元素
var sliderbar = document.querySelector('.sliderbar');
var con = document.querySelector('.con');
// 当我们鼠标经过 sliderbar 就会让 con这个盒子滑动到左侧
// 当我们鼠标离开 sliderbar 就会让 con这个盒子滑动到右侧
sliderbar.addEventListener('mouseenter', function() {
// animate(obj, target, callback);
animate(con, -160, function() {
// 当我们动画执行完毕，就把 ← 改为 →
sliderbar.children[0].innerHTML = '→';
});
})
sliderbar.addEventListener('mouseleave', function() {
// animate(obj, target, callback);
animate(con, 0, function() {
sliderbar.children[0].innerHTML = '←';
});
})
script>
body>
案例：返回顶部
滚动窗口至文档中的特定位置。window.scroll(x, y)
注意，里面的x和y 不跟单位，直接写数字
①带有动画的返回顶部
②此时可以继续使用我们封装的动画函数
③只需要把所有的 left 相关的值改为跟页面垂直滚动距离相关就可以了
④页面滚动了多少，可以通过window.pageYOffset 得到
⑤最后是页面滚动，使用window.scroll(x,y)
<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() {
// 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';
}
})
// 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
goBack.addEventListener('click', function() {
// 里面的x和y 不跟单位的 直接写数字即可
// window.scroll(0, 0);
// 因为是窗口滚动 所以对象是window
animate(window, 0);
});
// 动画函数（只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了）
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - window.pageYOffset) / 10;//注意这里的改变
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (window.pageYOffset == target) { //注意这里的改变
clearInterval(obj.timer);
callback && callback();
}
window.scroll(0, window.pageYOffset + step); //注意这里的改变
}, 15);
}
script>
body>