返回顶部和筋斗云案例
返回顶部案例需求案例实现筋斗云案例案例需求案例实现返回顶部
案例需求
在博客:案例:仿淘宝右侧固定侧边栏中已经实现了当滚动到一定位置,显示/隐藏“返回顶部”,这里接着做点击
返回顶部即带有动画的回到顶部
案例实现
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>