常用功能收集
浏览器基本信息判断
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
console.log(u);
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/Mobile/g),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1
};
}(),
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判断元素即将出现在文档可视区域或文档可视区域的顶部
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;
导航条动画,设定
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);
}
锚链接跳转过渡
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;
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) {
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');
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;
})
}
}