获取网页的宽度和高度,网页滚动的距离(兼容)
function getScreen() {
if (window.innerWidth) { // IE9+ 最新浏览器
return {
width: window.innerWidth,
height: window.innerHeight
}
} else if (document.compatMode === "CSS1Compat") { // W3C
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
} else {
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
}
function getPageScroll() {
if (window.pageXOffset) {
return {
left: window.pageXOffset,
top: window.pageYOffset
}
} else if (document.compatMode === "CSS1Compat") {
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
compatMode:
BackCompat:标准兼容模式关闭。浏览器宽度:document.body.clientWidth;
CSS1Compat:标准兼容模式开启。 浏览器宽度:document.documentElement.clientWidth。
获取CSS样式(兼容)
/**
* 获取CSS样式
* @param ele
* @param attr
* @returns {string}
*/
function getCSSAttrValue(ele, attr) {
if (ele.currentStyle) { // 兼容 IE 和 Opera
return ele.currentStyle[attr];
}else {
return window.getComputedStyle(ele, null)[attr];
}
匀速动画封装
/**
* 匀速动画
* @param ele
* @param json
* @param step
* @param fn
*/
function linearAnimation(ele, json, step, fn) {
// 1.清除定时器
clearInterval(ele.timer);
// 2.设置定时器
ele.timer = setInterval(function () {
// 3.创建个旗帜
let flag = true;
// 4.遍历json
for (let key in json) {
let begin = parseInt(getCSSAttrValue(ele, key)) || 0;
let target = json[key];
// 4.1判断运动方向
let dir = (begin - target) > 0 ? -step : step;
// 4.2计算新的位置
begin += dir;
// 4.3判断元素是否到达目标值。因会存在负值,需用Math.abs取绝对值进行比较
if (Math.abs(target - begin) > Math.abs(dir)) {
flag = false;
} else {
begin = target;
}
ele.style[key] = begin + "px";
}
// 5.判断是否都到达终点
if (flag) {
// 5.1清除定时器
clearInterval(ele.timer);
// 5.2判断是否有函数
fn && fn();
}
}, 20);
}
阻止事件冒泡(兼容)
if (event.cancelBubble) {
event.cancelBubble = true;
} else {
event.stopPropagation(); // 只支持高级浏览器
}
函数防抖
function debounce(fn, delay) {
let timer = null;
return function () {
let self = this;
let agrs = arguments;
timer && clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(self, agrs);
}, delay || 1000)
}
}