myBlogs_2/docs/JavaScript/cases/05.md

常用功能收集

浏览器基本信息判断

  /*
  * 智能机浏览器版本信息:
  *
  */
  var browser = {
    versions: function () {
      var u = navigator.userAgent, app = navigator.appVersion;
      console.log(u);
      return {//移动终端浏览器版本信息
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
        mobile: !!u.match(/Mobile/g), //去掉浏览器内核判断
//        mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
        webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
      };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
  }
  document.writeln("语言版本: " + browser.language);
  document.writeln(" 是否为移动终端: " + browser.versions.mobile);
  document.writeln(" 是否为webKit: " + browser.versions.webKit);
  document.writeln(" ios终端: " + browser.versions.ios);
  document.writeln(" android终端: " + browser.versions.android);
  document.writeln(" 是否为iPhone: " + browser.versions.iPhone);
  document.writeln(" 是否iPad: " + browser.versions.iPad);
  document.writeln(navigator.userAgent);

JavaScript|jQuery判断元素即将出现在文档可视区域或文档可视区域的顶部

/* JavaScript判断元素即将出现在文档可视区域或离开文档可视区域.
一、判断元素是否处于可视文档区域顶部
判断条件:DOMTop.offsetTop + clientHeight - 10 < clientHeight + scrollTop
解析:
  获取元素距离文档顶端的长度,然后与窗口的高度相加;
  接着,再通过获取窗口滚动条顶端与文档顶端的距离;
  并通过判断得到元素是否处于,距离可视文档区域的顶部10个单位的位置.
二、判断元素是否即将出现在可视窗口的底部
判断条件:DOMTop.offsetTop -10 < clientHeight + scrollTop
解析:基本思路同上一致.
 */
function init() {
  var DOMTop = document.getElementById('box');
  document.addEventListener('scroll', function () {
    var clientHeight = document.documentElement.clientHeight;
    var scrollTop = document.documentElement.scrollTop;
    if (DOMTop.offsetTop + clientHeight - 10 < clientHeight + scrollTop) {
      console.log('发现元素')
    }
  })
}

window.onload = init;
// delete init();


/*jQuery判断元素即将出现在文档可视区域或离开文档可视区域.
思路同上一致,表达方式不同
 当元素距离可视区域还有10的长度时,执行相关程序*/
/*$(document).ready(function () {
  $(window).scroll(function () {
    // console.log($(window).scrollTop() +  $(window).height())
    // 文档距离屏幕可视区域的距离
    var DOMTop = $('.box').offset().top + 10;
    // 文档已经滑动的距离 + 窗口的高度
    var DOMScrollHeight = $(window).scrollTop() +  $(window).height();
    // 元素距离可视区域顶部距离为10的时候触发
    if (DOMTop < DOMScrollHeight) {
      console.log('DOMTop' + DOMTop);
      console.log('DOMScrollHeight' + DOMScrollHeight);
    }
  });
});*/

导航条动画，设定

function navAnimation() {
  let DOMTop = document.getElementById('nav'), // 获取导航对象
    clientHeight = document.documentElement.clientHeight, // 获取窗口可视区域高度
    tru = true,  // 是否替换类名的依据
    clientHeightScrollTop = clientHeight + DOMTop.offsetTop + DOMTop.clientHeight; // 是否替换类名的依据
  // 监听文档滚动条事件，绑定动画
  document.addEventListener('scroll', function () {
    let scrollTop = null;
    if (document.body.scrollTop !== 0) {
      scrollTop = document.body.scrollTop
    } else {
      scrollTop = document.documentElement.scrollTop
    }
    if (tru && clientHeightScrollTop < clientHeight + scrollTop) {
      DOMTop.setAttribute('class', 'page-nav top');
      tru = false
    }
    if (clientHeightScrollTop > clientHeight + scrollTop) {
      DOMTop.setAttribute('class', 'page-nav');
      tru = true
    }
  }, false);
}

锚链接跳转过渡

/*
# 锚链接跳转过度
条件：
  1.目标位置 & 滚动条位置 距离过近
  2.目标位置 > 滚动条位置
  3.目标位置 < 滚动条位置
策略：
  1.获取需要绑定事件的对象；
  2.使用for循环语句，给获取到的对象集合绑定事件；
  3.window.scrollTo(X,Y); 备注：X=window水平方向的滚动条移动位置；Y=window水平方向的滚动条移动位置;
  4.根据条件，执行不同事件。
  5.获取`目标位置 & 滚动条位置`的间距，除以25。然后用该数值与`滚动条位置`相加或相减。而累加或累减的过程通过setInterval()定时器方法来控制。
  6.程序执行完毕之后，用clearInterval()方法清除定时器。
 */
anchorLinkJumpTransition();

function anchorLinkJumpTransition() {
  let aTag = document.querySelectorAll('.animation-top a');
  for (let i = 0; i < aTag.length; i++) {
    aTag[i].addEventListener('click', function () {
      var $target = document.getElementById(this.hash.slice(1));
      scrollToTop($target.offsetTop);

      function scrollToTop(scrollDuration) {
        let scrollTop = null, // 滚动条当前位置
          scrollStep = null, // 滚动条累加前的位置
          s = 0; // 关闭计时器的条件 s = 25时
        if (document.body.scrollTop !== 0) {
          scrollTop = document.body.scrollTop
        } else {
          scrollTop = document.documentElement.scrollTop
        }
        scrollStep = scrollTop = Number.parseInt(scrollTop);
        console.log('滚动前，滚动条位置:' + scrollTop);
        console.log('目标位置：' + scrollDuration);
        // 目标位置 & 滚动条位置 距离过近
        console.log(Math.abs(scrollTop - scrollDuration))
        if (Math.abs(scrollTop - scrollDuration) > 21) {
          let scrollInterval = setInterval(function () {
            if (s < 26) {
              // s 是累加的，所以用来跟`目标位置 & 滚动条位置`的间距，相乘，获得过渡效果。
              window.scrollTo(0, scrollStep + (scrollDuration - scrollTop) / 25 * s);
              s++;
            }
            else {
              clearInterval(scrollInterval);
              scrollStep = null;
            }
          }, 10);
        }
      }
    }, false);
  }
}

文章标题的动画

function animateIn() {
  let animateIn = document.querySelectorAll('.container .title strong');
  // console.log(animateIn.getAttribute('class'))
  // console.log(animateIn)
  let that = null;
  for (let i = 0; i < animateIn.length; i++) {
    animateIn[i].addEventListener('click', function () {
      if (that !== null) {
        that.removeAttribute('class');
        if (that === this) {
          this.removeAttribute('class');
          that = null;
          return;
        }
      }
      this.setAttribute('class', 'animate-in');
      that = this;
    })
  }
}