自己整理出来的一些用到的方法的封装，欢迎指教
/** * Created by Administrator on 2016/11/21 0021. */ /** * 窗口加载 * @param fn */ function addLoadEvent(fn) { var oldOnLoad = window.onload; //检查现在的window.onload是否绑定了事件 //console.log(oldOnLoad); if (typeof oldOnLoad === "function") {//说明之前绑定了事件 window.onload = function () { oldOnLoad();//之前的要执行 fn();//传入的新的要绑定的将来也要执行 }; } else { window.onload = fn; /*window.onload = function () { fn(); };*/ } } /** * 获取内部文本innerText 的兼容性 * @param element * @returns {*} */ function getInnerText(element) {// 特殊情况 浏览器有innerText 但是当前元素的innerText 里面是空字符串""转换成boolean值是false; if (typeof element.innerText === "string") { return element.innerText; // ie 类 旧版 } else { return element.textContent; //FF 旧版 } } /** *设置内部文本innerText 的兼容性 * @param element * @param content */ function setInnerText(element, content) { if (typeof element.innerText === "string") { element.innerText = content; } else { element.textContent = content; } } /** * 封装 获取下一个兄弟元素 的兼容方法 * @param element * @returns {*} */ function getNextElement(element) { if (element.nextElementSibling) {//能找到 return element.nextElementSibling; } else { var next = element.nextSibling;//下一个兄弟节点 while (next && 1 !== next.nodeType) {//有 并且 不是我们要的 next = next.nextSibling; } return next; } } /** * 获取上一个兄弟元素的兼容写法 * @param element * @returns {*} */ function getPreviousElement(element) { if (element.previousElementSibling) { return element.previousElementSibling; } else { var perv = element.previousSibling;//上一个兄弟节点 while (perv && 1 !== perv.nodeType) {//1有 2不是我们想要的 perv = perv.previousSibling; } return perv; } } /** * 通过类名获取页面元素的兼容性写法 * @param element：获取元素的对象 * @param className：类名 * @returns {返回获得的页面元素} */ function getElementsByClassName(element, className) { if (element.getElementsByClassName) { return element.getElementsByClassName(className); } else { var filterArr = [];//符合类名条件的容器 var elements = element.getElementsByTagName("*");//获得当前元素的所有子元素 for (var i = 0; i < elements.length; i++) {//循环变量每一个元素 //"" var cName = elements[i].className;//获得元素的className var arr = cName.split(" ");//根据" "分割类名，得到一个数组 for (var j = 0; j < arr.length; j++) { if (className === arr[j]) {//将拥有这个类名的元素添加到数组中 filterArr.push(elements[i]); break; } } } return filterArr; } } /** *获得页面被卷去部分的封装 *.top就可以获取被卷去的头部的高度 *.left就可以获取被卷去的左侧的宽度 * @returns {{top: (Number|number), left: (Number|number)}} */ function scroll() { return { top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0 }; } /** * 网页可视区宽 封装 * @returns {Number|number} */ function client() { return { width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0, height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0 }; } /** * 缓动动画 * @param obj 要运动的对象 * @param json 对象，里面是obj的一些列属性：属性值（这些属性值相当于是目标值） * @param fn 在缓动动画结束之后，要执行的函数 */ function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json) { if (k === "opacity") { var leader = getStyle(obj, k) * 100; var target = json[k] * 100; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader / 100; } else if (k === "zIndex") { obj.style.zIndex = json[k]; } else { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; } if (leader != target) { flag = false; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 15); } /** *在页面上获得属性的方法的封装 * @param obj 要在页面上获得属性的对象 * @param attr 要在页面上获得的属性 * @returns {*} */ function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; } } /** *匀速动画的封装 * @param obj 要运动的对象 * @param target 运动的目标值 * @param stp 一步要运动是距离 */ function cutton(obj, target, stp) { clearInterval(obj.timer); obj.timer = setInterval(function () { var leader = obj.offsetLeft; var step = stp; step = leader < target ? step : -step; if (Math.abs(target - leader) >= Math.abs(step)) { leader = leader + step; obj.style.left = leader + "px"; } else { obj.style.left = target + "px"; clearInterval(obj.timer); } }, 15) } /** * 头部缓动动画 * @param obj * @param json * @param fn */ function animate1(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json) { if (k === "opacity") { var leader = getStyle(obj, k) * 100; var target = json[k] * 100; var step = (target - leader) / 20; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader / 100; } else if (k === "zIndex") { obj.style.zIndex = json[k]; } else { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; } if (leader != target) { flag = false; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 15); } /** * 匀速动画的封装(左右移动) * @param obj 要运动的对象 * @param target 运动的目标值 * @param stp 一步要运动的距离 */ function cuttonH(obj, target, stp) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = stp; step = obj.offsetTop < target ? step : -step; if (Math.abs(target - obj.offsetTop) >= Math.abs(step)) { obj.style.top = obj.offsetTop + step + "px"; } else { obj.style.top = target + "px"; clearInterval(obj.timer); } }, 15) }
一混五六年
