JavaScript 30 Day -- 12 图片的滑入滑出

实现效果：

页面中的文章有几张配图，随着页面上下滚动，图片位置划过图片一半时，图片从两侧滑入；图片位置离开可见区域时，图片向两侧滑出。、

关键点：

涉及控制图片的 CSS 属性：    translateX 来控制左右移动    scale 来控制缩放涉及页面尺寸的属性：    window.scrollY 文档从顶部开始滚动过的像素值    window.innerHeight viewport 部分的高度    ele.height 元素的高度    ele.offsetTop 当前元素顶部相对于其 offsetParent 元素的顶部的距离。    debounce 的作用： 降低事件监听的频率，使用了 Lodash 中的 debounce 方法。

javascript

    function debounce(func, wait = 20, immediate = true) {      var timeout;      return function() {        var context = this, args = arguments;        var later = function() {          timeout = null;          if (!immediate) func.apply(context, args);        };        var callNow = immediate && !timeout;        clearTimeout(timeout);        timeout = setTimeout(later, wait);        if (callNow) func.apply(context, args);      };    }    var sliderImages = document.querySelectorAll('.slide-in');    function checkSlide(e){      sliderImages.forEach(key =>{        // console.log(key.height);        var imgSize = (window.innerHeight + window.scrollY) - key.height/2;        var imgWindow = key.height + key.offsetTop;        if((imgSize > key.offsetTop) && (imgWindow > window.scrollY)){          key.classList.add('active');        }else{          key.classList.remove('active');        }      });      // console.log(sliderImages[0].offsetTop);      // console.log(sliderImages[1].offsetTop);      // console.log(e);      // console.log(window.scrollY);      // console.log(window.innerHeight);    }    // window.addEventListener('scroll',checkSlide);    window.addEventListener('scroll',debounce(checkSlide));