元素偏移量offset系列
动态获取元素位置，大小等。
获取元素距离带有定位父元素的位置 否则返回的是body
获得元素自身的大小 高度和宽度 是包含padding+border+width
注意：返回的数值都不带单位
获取鼠标在盒子的位置
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
}
</style>
</head>
<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);
console.log(box.offsetTop); */
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
})
</script>
</body>
</html>
元素可视区client系列
立即执行函数(function(){})() ：主要作用创建一个独立的作用域
<script>
//1.立即执行函数：不需要调用，立马能够自己执行的函数
function fn() {
console.log(1);
}
fn();
//2.写法 也可以传递参数进来
//(function () { })() 或者(function () { }());
(function () {
console.log(2);
})() //第二个小括号可以看做是调用函数
//3.立即执行函数最大的作用就是 独立创建了一个作用域，里面所有的变量都是局部变量 不会有命名冲突的情况
</script>(function flexible(window, document) {
//获取的html 的根元素
var docEl = document.documentElement
//dpr 物理像素比
var dpr = window.devicePixelRatio || 1
//adjust body font size
function setBodyFontSize() {
//如果页面中有body 这个元素 就设置body的字体大小
if (document.body) {
document.body.styl.fontSize = (12 * dpr) + 'px'
} else {
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(textElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
})(window, document)
元素滚动scroll系列
<style>
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: purple;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
}
</style>
</head>
<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.offsetTop 就是被卷去头部的大小 一定要写到滚动的外面
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>三大系列比较
offset系列经常用于获取元素位置 offsetLeft offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll经常用于获取滚动距离scrollTop scrollLeft
注意页面滚动的距离通过window.pageXoffset 获得
mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发
mouseleave同样不会冒泡
动画函数封装
核心原理：通过定时器setInterval（）不断移动盒子位置
实现步骤：
1.获得盒子当前位置
2.让盒子在当前位置加上1个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器的条件
5.注意此元素需要添加定位，才能使用element.style.left
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<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>缓动效果原理
就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1.让盒子每次移动距离慢慢变小，速度就会慢慢落下来
2.核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
3.停止的条件是：让当前盒子位置等于目标位置就停止定时器
<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';
}, 30);
}
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>动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置
<body>
<button class="btn500">西御河点击到500</button>
<button class="btn800">西御河点击到800</button>
<span>西御河</span>
<script>
//缓动动画函数封装 obj目标对象 target目标位置
//思路：
// 1.让盒子每次移动距离慢慢变小，速度就会慢慢落下来
// 2.核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
// 3.停止的条件是：让当前盒子位置等于目标位置就停止定时器
function animate(obj, target, callback) {
//console.log(callback); callback = function () { } 调用的时候 callback()
//先清除以前的定时器，只保留当前的一个定时器执行
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);
//回调函数写到定时器结束里面
if (callback) {
//调用函数
callback();
}
}
//把每次加1 这个步长值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
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, function () {
//alert('hello');
span.style.backgroundColor = 'red';
});
})
//匀速动画 就是 盒子是当前的位置 + 固定的值 10
//缓动动画就是 盒子当前的位置 + 变化的值（（目标值-现在的位置）/10）
</script>
</body>
引用animate动画函数
<script src="animate.js"></script>
</head>
<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,cllback);
animate(con, -160, function () {
//当我们动画执行完毕，就把 ⬅ 改为 ➡
sliderbar.children[0].innerHTML = '➡';
});
})
sliderbar.addEventListener('mouseleave', function () {
//animate(obj,target,cllback);
animate(con, 0, function () {
sliderbar.children[0].innerHTML = '⬅';
});
})
</script>
</body>
常见网页特效案例
网页轮播图
功能需求：
1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
2.点击右侧按钮一次，图片往左播放一次，以此类推，左侧按钮同理
3.图片播放的同时，下面小圆圈模块也跟随一起变化
4.点击小圆圈，可以播放相应图片
5.鼠标不经过轮播图，轮播图也会自动播放图片
6.鼠标经过，轮播图模块，自动播放停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 980px;
height: 455px;
margin-left: 219px;
margin-top: 10px;
}
.focus {
position: relative;
width: 720px;
height: 455px;
background-color: purple;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
img {
width: 720px;
height: 455px;
}
</style>
<!--这个animate.js 必须写到 index.js的上面引用-->
<script src="js/animate.js"></script>
<!--引入我们首页的js文件-->
<script src="js/index.js"></script>
</head>
<body>
<div class="w">
<div class="main">
<div class="focus f1">
<!--左侧按钮-->
<a href="#" class="arrow-l">
<
</a>
<!--右侧按钮-->
<a href="#" class="arrow-r">
<
</a>
<!--核心的滚动区域-->
<ul>
<li>
<a href="#"><img src="images/1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="images/2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="images/3.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="images/4.jpg" alt=""></a>
</li>
</ul>
<!--小圆圈-->
<ol class="circle">
</ol>
</div>
</div>
</div>
</body>
</html>window.addEventListener('load', function () {
//1.获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
//2.鼠标经过focus 就显示隐藏左右按钮
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;//清除定时器变量
});
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function () {
//手动调用点击事件
arrow_r.click();
}, 2000);
});
//3.动态生成小圆圈 有几张图，我就生成几个小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
//console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
//创建一个小li
var li = document.createElement('li');
//记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i);
//把小li插入到ol里面
ol.appendChild(li);
//4.小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
li.addEventListener('click', function () {
//干掉所有人 把所有的小li 清除 current 类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下我自己 当前的小li 设置current 类名
this.className = 'current';
//5.点击小圆圈，移动图片 当然移动的是 ul
//ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
//当我们点击了某个小li 就拿到当前小li 的索引号
var index = this.getAttribute('index');
//当我们点击了某个小li 就要把这个li 的索引号给 num
num = index;
//当我们点击了某个小li 就要把这个li 的索引号 给 circle
circle = index;
console.log(focusWidth);
console.log(index);
animate(ul, -index * focusWidth);
})
}
//把ol里面的第一个小li设置类名为 current
ol.children[0].className = 'current';
//6.克隆第一张图片（li）放到ul 最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//7. 点击右侧按钮 图片滚动一张
var num = 0;
//circle 控制小圆圈的播放
var circle = 0;
arrow_r.addEventListener('click', function () {
//如果走到了最后复制的一张图片， 此时 我们的ul 要快速复原 left 改为 0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth);
//8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
//如果circle==4 说明走到最后我们克隆的这张图片了 我们就复原
if (circle == ol.children.length) {
circle = 0;
}
circleChange();
});
//9.左侧按钮做法
arrow_l.addEventListener('click', function () {
//如果走到了最后复制的一张图片， 此时 我们的ul 要快速复原 left 改为 0
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth);
//8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
//如果circle<0 说明第一张图片，则小圆圈要改为第四个小圆圈（3）
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
circle = circle < 0 ? ol.children.length - 1 : circle;
circleChange();
});
function circleChange() {
//先清除其余小圆圈的current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下当前的小圆圈的current类名
ol.children[circle].className = 'current';
}
//10.自动播放轮播图 类似右侧按钮 把手动改为自动
var timer = setInterval(function () {
//手动调用点击事件
arrow_r.click();
}, 2000);
})
节流阀
防止轮播图按钮连续点击造成播放过快
目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
window.addEventListener('load', function () {
//1.获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
//2.鼠标经过focus 就显示隐藏左右按钮
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;//清除定时器变量
});
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function () {
//手动调用点击事件
arrow_r.click();
}, 2000);
});
//3.动态生成小圆圈 有几张图，我就生成几个小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
//console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
//创建一个小li
var li = document.createElement('li');
//记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i);
//把小li插入到ol里面
ol.appendChild(li);
//4.小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
li.addEventListener('click', function () {
//干掉所有人 把所有的小li 清除 current 类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下我自己 当前的小li 设置current 类名
this.className = 'current';
//5.点击小圆圈，移动图片 当然移动的是 ul
//ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
//当我们点击了某个小li 就拿到当前小li 的索引号
var index = this.getAttribute('index');
//当我们点击了某个小li 就要把这个li 的索引号给 num
num = index;
//当我们点击了某个小li 就要把这个li 的索引号 给 circle
circle = index;
console.log(focusWidth);
console.log(index);
animate(ul, -index * focusWidth);
})
}
//把ol里面的第一个小li设置类名为 current
ol.children[0].className = 'current';
//6.克隆第一张图片（li）放到ul 最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//7. 点击右侧按钮 图片滚动一张
var num = 0;
//circle 控制小圆圈的播放
var circle = 0;
//flag 节流阀
var flag = true;
arrow_r.addEventListener('click', function () {
if (flag) {
flag = false; //关闭节流阀
//如果走到了最后复制的一张图片， 此时 我们的ul 要快速复原 left 改为 0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth, function () {
flag = true; //打开节流阀
});
//8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
//如果circle==4 说明走到最后我们克隆的这张图片了 我们就复原
if (circle == ol.children.length) {
circle = 0;
}
circleChange();
}
});
//9.左侧按钮做法
arrow_l.addEventListener('click', function () {
if (flag) {
flag = false;
//如果走到了最后复制的一张图片， 此时 我们的ul 要快速复原 left 改为 0
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function () {
flag = true;
});
//8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
//如果circle<0 说明第一张图片，则小圆圈要改为第四个小圆圈（3）
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
circle = circle < 0 ? ol.children.length - 1 : circle;
circleChange();
}
});
function circleChange() {
//先清除其余小圆圈的current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下当前的小圆圈的current类名
ol.children[circle].className = 'current';
}
//10.自动播放轮播图 类似右侧按钮 把手动改为自动
var timer = setInterval(function () {
//手动调用点击事件
arrow_r.click();
}, 2000);
})
返回顶部
滚动窗口至文档中的特定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: purple;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
}
</style>
</head>
<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.offsetTop 就是被卷去头部的大小 一定要写到滚动的外面
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';
}
})
//3.当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
goBack.addEventListener('click', function () {
//里面的x和y 不跟单位的 直接写数字即可
// window.scroll(0, 0);
//因为是窗口滚动 所以对象是window
animate(window, 0);
});
//动画函数
function animate(obj, target, callback) {
//console.log(callback); callback = function () { } 调用的时候 callback()
//先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//步长值写到定时器的里面
//把我们步长值改为整数 不要出现小数的问题
//var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - window.pageYOffset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (window.pageYOffset == target) {
//停止动画 本质是停止定时器
clearInterval(obj.timer);
//回调函数写到定时器结束里面
// if (callback) {
// //调用函数
// callback();
// }
callback && callback();
}
//把每次加1 这个步长值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10
// obj.style.left = window.pageYOffset + step + 'px';
window.scroll(0, window.pageYOffset + step);
}, 30);
}
</script>
</body>
</html>
筋斗云案例
<script src="animate.js"></script>
<script>
window.addEventListener('load', function () {
//1.获取元素
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c-nav');
var lis = c_nav.querySelectorAll('li');
//2.给所有的小li绑定事件
//这个current 做为筋斗云的起始位置
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;
});
}
})
</script>
</head>
<body>
<div id="c_nav" class="c-nav">
<span class="cloud"></span>
<ul>
<li class="current"><a href="#">首页新闻</a></li>
<li><a href="#">师资力量</a></li>
<li><a href="#">活动策划</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">招聘信息</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">我是小猪</a></li>
<li><a href="#">谁是佩奇</a></li>
</ul>
</div>
</body>
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
