元素从下方划入效果（封装免邮）

Posted 2021-01-11 fearless427

 //animate效果封装
  // animation(".Odiv", "bounceInUp animated");
  function animations(node,result,num) {
    // node             节点名
    //                  animated效果
    var pageHeight,
      rollHeight,
      visibilityHeight = 0;
    // pageHeight       浏览器高度---screen.height
    // rollHeight       内容页被卷去的高度---scrollTop
    // visibility       当前节点所在位置---offset().top
    pageHeight = window.screen.height / 2 + num;
    visibilityHeight = $(node).offset().top;
    // console.log(pageHeight);
    // console.log(visibilityHeight+"---offset");

      // window.onscroll = function (e) {
      // var e = e || window.event;
      //window.onscroll 只能调用一次  
      //使用  $(window).scroll(function(){ 完美解决
    $(window).scroll(function(){
      rollHeight =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(rollHeight+"---scrollTop");
      if (rollHeight > visibilityHeight - pageHeight) {
        $(node)
          .css({ opacity: "1" })
          .addClass(result);
      }
      if(rollHeight < visibilityHeight - (pageHeight+num)){
        $(node).css({ opacity: "0" }).removeClass(result);
//低于浏览器删除动画效果并消失等待下一次添加
      }
    });
  }

        //或者用这种方法也可以避免 window.onscroll 只调用一次  

        addEvent(window, ‘scroll‘, function () {
            console.log(33)
        });
        function addEvent(obj, type, fn) {
            if (obj.attachEvent) { //ie用来绑定脚本事件
                obj.attachEvent(‘on‘ + type, function () {
                    fn.call(obj);
                })
            } else {
                obj.addEventListener(type, fn, true);
//向指定元素添加事件句柄
//三个参数 event function useCapture
// event 必须 字符串 指定事件名
// function  必须  指定事件触发是要执行的函数
// useCapture  可选 布尔值 指定事件是否在捕获或在冒泡阶段执行
//true 是捕获
            }
        }