JavaScript特效！scroll与缓动动画

迈不过友情╰ 2021-12-11 07:41 233阅读 0赞

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

### 文章目录 ###

*  1.基础
 *  2.固定导航栏
 *  3.scrollTo方法
 *   *  3.1 举例：回到顶部
     *  3.2 方法应用
     *  3.3 回调函数

# 1.基础 #

*  **原理**：盒子未来位置=当前位置+步长，步长会越来越小。设置点击事件，事件函数为定时器。

div.style.left = div.offsetLeft + (400 - div.offsetLeft) / 10 + "px";

*  **封装函数**：与\[匀速动画构造类似，但是步长原理不同，匀速的是固定的，而缓动会随当前值发生变化；

*  **scrollWidth和scrollHeight**：获取盒子的宽高  
    scrollWidth=width+padding×2；scrollHeight=height+padding×2.
 *  **scrollTop和scrollLeft**：网页（body）被卷去的头部和左边的部分

# 2.固定导航栏 #

*  **需求**：滑动滚动条时，导航栏固定；
 *  **思路**：使用fiexd类实现。若卷去的部分超过第2个盒子距离顶部的位置，加上该类；否则取消。
 *  **代码**：使用window.onscroll事件，函数内容部分如下：

if (scroll().top > height) { // var height = topDiv.offsetHeight;
                        middle.className += " fixed";
                        main.style.paddingTop = middle.offsetHeight + "px";
                    } else { 
                        middle.className = "";
                        main.style.paddingTop = 0;
                    }

# 3.scrollTo方法 #

## 3.1 举例：回到顶部 ##

*  **需求**：被卷去的头部超过1000显示小火箭，然后点击小火箭缓慢移动到最顶端。需要注意的是移动的是屏幕并非盒子。
 *  **思路**：小火箭用display：none默认隐藏，满足条件后才显示；使用window.scrollTo（x,y）事件跳转到指定坐标。
 *  **代码**：  
    1.使用window.onscroll事件设置小火箭，函数内容部分如下：

if (scroll().top > 1000) { 
                        img.style.display = "block";
                    } else { 
                        img.style.display = "none";
                    }
                    leader = scroll().top;

2.点击小火箭后，设置定时器。清除定时器与步长处理，和**封装函数**相同，不同的是用无参函数，且第3步代码如下：

if (leader === 0) { 
     		clearInterval(timer);
            }else{ 
     			leader = leader + step; 
                window.scrollTo(0, leader);   
           }

## 3.2 方法应用 ##

*  **需求**：点击按钮后，使盒子移动到指定位置并改变形状等属性。
 *  **思路**：设置一个对象，装具体的目标位置。
 *  **代码**：  
    1.点击事件：

var json = { "left": 100, "top": 200, "width": 300, "height": 300};
    animate(div, json);

2.封装函数：  
第2、3步的代码均在for循环中，因为要遍历对象的4个方位。for循环用 for (var key in json) ，内容如下：

//步骤2
    var current = parseInt(getStyle(ele, key)) || 0;
    var step = (json[key] - current) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);        
    //步骤3 
    current = current + step;
    ele.style[key] = current + "px";

上述代码的getStyle函数通过**兼容方法**获取元素样式：

function getStyle(ele, attr) { 
            if (window.getComputedStyle) { 
                return window.getComputedStyle(ele, null)[attr];
            }
            return ele.currentStyle[attr];
        }

## 3.3 回调函数 ##

基础是3.2节内容，只是需要移动两次，故做出相应修改。  
1.点击事件：  
增加

var json2 = { "left": 300, "top": 10, "width": 100, "height": 100};

修改：

animate(div, json1, function () {  //第三个参数是执行完前面步骤后再执行该函数
                animate(div, json2);
            })

2.封装函数：  
预选设置bool=true，若未达到预定位置则改为false；否则清除定时器，并执行第2个函数，第2个函数如下：

if (fn){ 
    	fn();
    }