Web前端------JS基础匀速动画、缓动动画函数封装和Scroll()方法封装

关于缓动动画的JS代码封装：（支持来回运动）

缓动动画在书写的时候会存在一些问题，牵涉到向上取整和向下取整问题，这些问题的关于是由于offsetleft在取值的时候是采用四舍五入取整的策略，导致缓动动画在运动为末尾会陷入死循环，导致无法到达最终的目标位置，以及无法清除定时器。所以特别将缓动动画的封装代码展示出来以供后期使用：

//缓动动画封装
    function animate(ele,target) {
        //要用定时器，先清定时器
        //一个萝卜一个坑儿，一个元素对应一个定时器
        clearInterval(ele.timer);
        //定义定时器
        ele.timer = setInterval(function () {
            //获取步长
            //步长应该是越来越小的，缓动的算法。
            var step = (target-ele.offsetLeft)/10;
            //对步长进行二次加工(大于0向上取整,小于0项下取整)
            step = step>0?Math.ceil(step):Math.floor(step);
            //动画原理： 目标位置 = 当前位置 + 步长
            ele.style.left = ele.offsetLeft + step + "px";
            //检测缓动动画有没有停止
            console.log(1);
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                //处理小数赋值
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },30);
    }

关于匀速动画的JS代码封装：（支持来回运动）

   function animate(ele,target){
        //要用定时器，先清除定时器
        //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
        //而定时器本身讲成为盒子的一个属性
        clearInterval(ele.timer);
        //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
        //目标值如果大于当前值取正，目标值如果小于当前值取负
        var speed = target>ele.offsetLeft?10:-10;
        ele.timer = setInterval(function () {
            //在执行之前就获取当前值和目标值之差
            var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            //目标值和当前值只差如果小于步长，那么就不能在前进了
            //因为步长有正有负，所有转换成绝对值来比较
            if(Math.abs(val)

Scroll()方法的封装

scrollTop和scrollLeft是用来监测浏览器滑动范围（Y方向和X方向）的两个属性，但是各大浏览器对于这两个属性的支持程度不同，所以在使用时，要兼容各大浏览器
具体差别如下描述：
一、未声明 DTD（谷歌只认识他）
document.body.scrollTop
二、已经声明DTD（IE678只认识他）
document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的
window.pageYOffset

常见的兼容性写法：

var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var aaa = document.documentElement.scrollTop + document.body.scrollTop;

为了检测网页是否声明DTD，引入了compatMode
document.compatMode === "BackCompat"
BackCompat 未声明
CSS1Compat 已经声明
注意大小写
借助Json，对该方法进行封装如下：

  function scroll(){
            //如果这个属性存在，那么返回值应该是0-无穷大
            //如果没有返回值是undefined；
            //只要判断不是undefined就可以调用此方法
            //练习使用此种封装
            if(window.pageYOffset !== undefined){
//                var json = {
//                    "top": window.pageYOffset,
//                    "left": window.pageXOffset
//                };
//                return json;
                return {
                    "top": window.pageYOffset,
                    "left": window.pageXOffset
                };
            }else if(document.compatMode === "CSS1Compat"){
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            }else{
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }

            //简单封装（实际工作使用）
//            return {
//                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
//                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
//            }
        }

另外：获取title、body、head、html标签

• document.title --- 文档标题；
• document.head --- 文档的头标签
• document.body --- 文档的body标签；
• document.documentElement --- 这个很重要
  它表示文档的html标签， 也就是说，基本结构当中的html标签并不是通过document.html 去访问的，而是document.documentElement

JS楼层跳转小案例

代码如下:

    
    




    

        
鞋子区域
        
袜子区域
        
裤子区域
        
裙子区域
        
帽子区域
    
    

        
鞋子
        
袜子
        
裤子
        
裙子
        
帽子
    
    
    

其中引用的JS文件如下：

//缓动动画封装
function animate(ele,target) {
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        var step = (target-ele.offsetTop)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        ele.style.top = ele.offsetTop + step + "px";
        console.log(1);
        if(Math.abs(target-ele.offsetTop)

效果如下所示：

效果图.gif

有一些bug,就是不方便滑动，需要优化

欢迎关注我的个人微信公众号，免费送计算机各种最新视频资源！你想象不到的精彩！

0.jpg