1. 给标签增加或移出类名

肯定有人会说,添加类名可以用obj.classList.add呀,是的,这没有错。但我也说了,这些我积累的函数都是兼容性极佳的方式,也就是说,不管是 ie 的多低版本,也是没多大问题的,而且这些自己实现的功能确实对初学者帮助不少。

function addClass(ele, className){
    var reg = new RegExp("\\b"+className+"\\b");
    if(!reg.test(ele.className)){
        /* 如果元素 ele 不包含 className */
        ele.className += " "+className;
    };
};

function removeClass(ele, className){
    if(ele.className){
        var reg = new RegExp("\\b"+className+"\\b");
        var classes = ele.className;
        ele.className = classes.replace(reg, "");
        if(/^\s*$/g.test(ele.className)){
            ele.removeAttribute("class");
        };
    }else{
        ele.removeAttribute("class");
    }
};

2.滚轮事件


滚轮事件也是 PC 端主流网站必须实现的功能,通常我们会配合我们自己写的滚动条禁止掉系统的滚动条来使用。但是,滚轮事件跟我们想象的略有不同,它是 firefox 一种绑定,反而 ie 和 chrome 是一样的。

window.onload = function () {

  //ie/chrome
  document.onmousewheel = function(event){
      scrollMove(event,callback)
  }
  //firefox
  if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',function(event){
        scrollMove(event,callback)
    });
  }

  function scrollMove(event,callback) {
    event = event || window.event;
    var flag = '';
    if(event.wheelDelta){
      //ie/chrome
      if(event.wheelDelta > 0){
        //上
        flag = 'up';
      }else {
        //下
        flag = 'down'
      }
    }else if(event.detail){
      //firefox
      if(event.detail < 0){
        //上
        flag = 'up';
      }else {
        //下
        flag = 'down'
      }
    }

    switch (flag){
      case 'up':
        if (callback && callback['wheelUp'] == 'function') {
            callback.wheelUp()
        }          
        break;
      case 'down':
        
        break;
    }

    //取消默认行为
    event.preventDefault && event.preventDefault();
    return false;
  }

};


未完待续 , 有时间就更新




天才樱木花道
12 声望0 粉丝

武装你的应该是知识,而不是一堆破铜烂铁