js特效01动画效果及页面固定导航栏

day01体验动画效果

<script>    var timer=null;    var btn=document.getElementById('btn');    var btn1=document.getElementById('btn1');    var box=document.getElementById('box');    btn.onclick=function() {        animate (box,200);        }    btn1.onclick=function() {        animate (box,400);        }//封装动画函数//需求：能够让任对象移动到指定的位置function animate (obj,target) {//传入任意对象obj，指定位置target。    clearInterval(obj.timer);//每次执行前先清除定时器，防止重复设置定时器。        obj.timer=setInterval(function () {//加上定时器            var leader=obj.offsetLeft;//获取当前对象的位置            var step=10;//设置步长            /*if (leader<target) {                step=step;            }else{                step=-step;            };*/            step=leader<target?step:-step;            if (Math.abs(leader-target)>=Math.abs(step)) {//距离大于步长值，                leader=leader+step;//动画公式                obj.style.left=leader+"px";//leader只是数字，需要加单位                }                else{                    obj.style.left=target+"px";//手动放到终点                    clearInterval(obj.timer);                }        },15)    }</script>

小结：设置定时器后清理定时器：清理定时器时需要有定时器的id，timer
var timer=null;
timer=setInterval(function () {}，15);
clearInterval(timer);

2.1 scroll系列 页面滚动坐标

window.onscroll=function () {    //scroll ().top//被卷去的头部。调用这个函数就相当于调用了这个对象    //scroll ().left//被卷去的头部console.log(scroll().top);};//封装scroll函数//封装获取页面被卷去的头部高度和左侧宽度的 兼容函数function scroll() {    var scrollTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;    var scrollLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;        var o={};        o.top=scrollTop;        o.left=scrollLeft;        return o;//返回一个对象，函数的返回值是什么，就相当于调用了什么。}

页面滚动坐标scroll代码简化：

代码简化：对象点出来的属性 没有字面量简洁。function scroll() {        return{            top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,            left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0    } ;//返回一个对象，函数的返回值是什么，就相当于调用了什么。}

2.3 页面固定导航栏
需求：窗体滚动的时候 判断页面被卷去的头部的高度 如果大于topPart的高度 就要把nacBar变成固定定位

<script>    //获取元素    var topPart=document.getElementById('topPart');    var nacBar=document.getElementById('nacBar');    var mainPart=document.getElementById('mainPart');    //页面滚动    window.onscroll=function(){        if(scroll().top>topPart.offsetHeight) {            navBar.className="fixed";//改变定位，            //固定定位脱离标准流，不占位置，后边的就跳上来了            //为了防止 后面的内容跳上来 可以给后面的内容加上paddingTop值。            mainPart.style.paddingTop=navBar.offsetHeight+"px";        }else{            navBar.className="";            mainPart.style.paddingTop=0;        };    }