js动画相关函数的封装

/** * 获取滚动的距离，并做兼容性处理 * @returns {{top: number, left: number}} 返回JSON数据top,left */ function scroll() { if (window.pageYOffset !== null) { return { top : window.pageYOffset, left: window.pageXOffset } } else if (document.compatMode === 'CSS1Compat') { return { top: document.documentElement.scrollTop, left: document.documentElement.scrollLeft } } else { return { top: document.body.scrollTop, left: document.body.scrollLeft } } } /** * 获取指定元素 * @param id * @returns {any} */ function $(id) { return typeof id === 'string' ? document.getElementById(id) : null; } /** * 获取可视窗口的大小，兼容性 * @returns {{w: number, h: number}} */ function getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { if (document.compatMode === "BackCompat") { return { w: document.body.clientWidth, h: document.body.clientHeight } } else { return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } } } /** * 匀速动画函数 * @param {object}ele * @param {number}target * @param {number}speed */ function constant(ele, target, speed = 60) { // 1.清除定时器 clearInterval(ele.timer); // 2.判断方向 let dir = ele.offsetLeft < target ? speed : -speed; // 3.设置定时器 ele.timer = setInterval(function () { ele.style.left = ele.offsetLeft + dir + 'px'; if(Math.abs(target - ele.offsetLeft) <= speed) { clearInterval(ele.timer); ele.style.left = target + 'px'; } }, speed) } /** * 获取css的样式值 * @param {object}obj * @param attr * @returns {*} */ function getCSSAttrValue(obj, attr) { if(obj.currentStyle){ // IE 和 opera return obj.currentStyle[attr]; }else { return window.getComputedStyle(obj, null)[attr]; } } /** * 缓动动画 * @param obj * @param json * @param fn */ function buffer(obj, json, fn) { // 1.1 清除定时器 clearInterval(obj.timer); // 1.2 设置定时器 var begin = 0, target = 0, speed = 0; obj.timer = setInterval(function () { // 1.3.0 旗帜 var flag = true; for(var k in json){ // 1.3 获取初始值 if("opacity" === k){ // 透明度 begin = Math.round(parseFloat(getCSSAttrValue(obj, k)) * 100) || 100; target = parseInt(json[k] * 100); }else if("scrollTop" === k){ begin = Math.ceil(obj.scrollTop); target = parseInt(json[k]); }else { // 其他情况 begin = parseInt(getCSSAttrValue(obj, k)) || 0; target = parseInt(json[k]); } // 1.4 求出步长 speed = (target - begin) * 0.2; // 1.5 判断是否向上取整 speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed); // 1.6 动起来 if("opacity" === k){ // 透明度 // w3c的浏览器 obj.style.opacity = (begin + speed) / 100; // ie 浏览器 obj.style.filter = 'alpha(opacity:' + (begin + speed) +')'; }else if("scrollTop" === k){ obj.scrollTop = begin + speed; }else { obj.style[k] = begin + speed + "px"; } // 1.5 判断 if(begin !== target){ flag = false; } } // 1.3 清除定时器 if(flag){ clearInterval(obj.timer); console.log(fn); // 判断有没有回调函数 if(fn){ fn(); } } }, 20); }