返回顶部和筋斗云案例
返回顶部案例需求案例实现筋斗云案例案例需求案例实现返回顶部
案例需求
在博客：案例：仿淘宝右侧固定侧边栏中已经实现了当滚动到一定位置，显示/隐藏“返回顶部”，这里接着做点击返回顶部即带有动画的回到顶部
案例实现
window.scroll(x,y),滚动窗口至文档的特定位置为”返回顶部”绑定事件，如果是a标签，则一定要将href属性值改为JavaScript:;(因为此处非选用锚点跳转)通过将之前封装的动画函数animate.js修改实现：只需要把所有的left相关的值改为跟页面垂直滚动距离相关就可以了
页面滚动了多少，可以通过window.pageYoffset得到
案例JS代码：
var goBack = document.querySelector('.goBack');// 点击【返回顶部】模块，就让窗口滚动回最上方goBack.addEventListener('click', function () {moveTop(window, 0);})//页面垂直缓动的动画函数function moveTop(obj, target, callback) {// 清除多次点击后的定时器，保留最新的那一次clearInterval(obj.timer);// 使用obj.timer，把timer当作obj的属性，如果使用var timer = ，调用一次就会开辟一次内存空间obj.timer = setInterval(function () {//对步长向上取整，因为除以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();}}// 只要还没到目标位置，就加上步长，继续走window.scroll(0,window.pageYOffset + step)}, 15);}
筋斗云案例
案例需求
鼠标移动到哪，筋斗云带有动画效果跟随移动；移出则回到原来位置鼠标点击到哪云就停在哪案例实现
案例代码：
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC", Verdana, Arial, '微软雅黑','宋体';}.header{position: relative;width: 1226px;height: 48px;margin: 20px auto;background-color: rgb(232,231,227);}.nav{overflow: hidden;padding-left: 20px;/* 剩下44px */position: absolute;top: 0;left: 0;}.nav li{color: rgb(126,126,125);list-style-type: none;float: left;height: 48px;line-height: 48px;font-size: 14px;width: 166px;}.cloud{background-image: url(../../images/cloud.png);background-size: 100%;position: absolute;width: 166px;height: 66px;top: -23px;}/* .cloud img{width: 100%;} */</style></head><body><div class="header-wrap"><div class="header"><span class="cloud"></span><ul class="nav"><li>首页新闻</li><li>师资力量</li><li>活动策划</li><li>企业文化</li><li>招聘信息</li><li>公司简介</li><li>你是佩奇</li></ul></div></div><script>// 获取元素var nav = document.querySelector('.nav');var cloud = document.querySelector('.cloud');var lis = nav.querySelectorAll('li');// 给每个li注册事件var current = 0;//作为筋斗云的起始位置for(var i = 0; i<lis.length; i++){lis[i].addEventListener('mouseenter',function(){animate(cloud,this.offsetLeft);})lis[i].addEventListener('mouseleave',function(){animate(cloud,current);})lis[i].addEventListener('click',function(){// 鼠标点击，就把当前位置作为目标值current = this.offsetLeft;})}// 动画函数function animate(obj, target, callback) {//核心原理：js是动态语言，可以很方便的给对象加属性//还有一个问题就是，加了按钮后，如果不断点击按钮，元素运动得会越来越快，这是因为开启了多个定时器//解决方案就是先清除之前的定时器，只开启一个定时器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();}}//通过步长公式obj.style.left = obj.offsetLeft + step + 'px';//offsetLeft用来获取位置，style用来赋值，注意加单位px}, 30);}</script></body></html>
