码迷,mamicode.com
首页 > 其他好文 > 详细

元素从下方划入效果(封装免邮)

时间:2018-10-10 14:33:59      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:句柄   anim   --   node   remove   height   on()   lse   set   

 //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 是捕获 } }

  


  

元素从下方划入效果(封装免邮)

标签:句柄   anim   --   node   remove   height   on()   lse   set   

原文地址:https://www.cnblogs.com/fearless427/p/9765584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!