1 //查看滚动条的滚动距离 2 function getScrollOffset() { 3 if (window.pageXOffset) { 4 return { 5 x: window.pageXOffset, 6 y: window.pageYOffset 7 } 8 } else { 9 return { 10 x: document.body.scrollLeft + document.documentElement.scrollLeft, 11 y: document.body.scrollTop + document.documentElement.scrollTop 12 } 13 } 14 } 15 16 //查看视口的尺寸 17 function getViewportOffset() { 18 if (window.innerWidth) { 19 return { 20 w: window.innerWidth, 21 h: window.innerHeight 22 } 23 } else { 24 if (document.compatMode === "BackCompat") { 25 return { 26 w: document.body.clientWidth, 27 h: document.body.clientHeight 28 } 29 } else { 30 return { 31 w: document.documentElement.clientWidth, 32 h: document.documentElement.clientHeight 33 } 34 } 35 } 36 } 37 38 //元素相对于文档的坐标 39 function getElementPosition(dom) { 40 var left = dom.offsetLeft; 41 var top = dom.offsetTop; 42 while (1) { 43 dom = dom.offsetParent; 44 if (dom) { 45 left += dom.offsetLeft; 46 top += dom.offsetTop; 47 } else { 48 break; 49 } 50 } 51 return { 52 left: left, 53 top: top 54 }; 55 } 56 57 58 //获取样式 59 function getStyle(elem, prop) { 60 if (window.getComputedStyle) { 61 return window.getComputedStyle(elem, null)[prop]; 62 } else { 63 return elem.currentStyle[prop]; 64 } 65 } 66 67 //兼容的 添加事件函数 68 function addEvent(elem, type, handle) { 69 if (elem.addEventListener) { 70 elem.addEventListener(type, handle, false); 71 } else if (elem.attachEvent) { 72 elem.attachEvent('on' + type, function() { 73 handle.call(elem); 74 }) 75 } else { 76 elem['on' + type] = handle; 77 } 78 } 79 80 // 取消冒泡 81 function stopBubble(event) { 82 if (event.stopPropagation) { 83 event.stopPropagation(); 84 } else { 85 event.stopBubble = true; 86 } 87 } 88 89 //阻止默认事件 90 function cancelHandler(event) { 91 if (event.preventDefault) { 92 event.preventDefault(); 93 } else { 94 event.returnValue = false; 95 } 96 } 97 98 // 取消事件 99 function removeEvent(elem, type, myFunction) { 100 if (elem.removeEventListener) { // 所有浏览器,除了 IE 8 及更早IE版本 101 elem.removeEventListener(type, myFunction); 102 } else if (elem.detachEvent) { 103 elem.detachEvent('on' + type, myFunction); 104 } 105 } 106 107 // 拖拽 108 function drap(elem) { 109 var disX, 110 disY; 111 addEvent(elem, 'mousedown', function(e) { 112 var event = e || window.event; 113 disX = event.pageX - parseInt(getStyle(elem, 'left')); 114 disY = event.pageY - parseInt(getStyle(elem, 'top')); 115 addEvent(document, 'mousemove', mouseMove); 116 addEvent(document, 'mouseup', mouseUp); 117 stopBubble(event); 118 cancelHandler(event); 119 }); 120 121 function mouseMove(e) { 122 var event = e || window.event; 123 elem.style.left = event.pageX - disX + 'px'; 124 elem.style.top = event.pageY - disY + 'px'; 125 } 126 127 function mouseUp(e) { 128 var event = e || window.event; 129 removeEvent(document, 'mousemove', mouseMove); 130 removeEvent(document, 'mouseup', mouseUp); 131 } 132 } 133 134 135 //仿 fixed 136 function positionFixed(elem) { 137 var elemTop = elem.offsetTop; 138 window.onscroll = function() { 139 div.style.top = window.pageYOffset + elemTop + 'px'; 140 } 141 } 142 143 //异步加载,创建script 标签,插入到DOM中,加载完毕后callback 144 function loadScript(url, callback) { 145 var script = document.createElement('script'); 146 script.type = 'text/javascript'; 147 if(script.readyState) { 148 script.onreadystatechange = function() { //IE 149 if(script.readyState == 'complete' || script.readyState == 'loaded') { 150 callback(); 151 } 152 } 153 }else { 154 script.onload = function() { //非IE 155 callback(); 156 } 157 } 158 script.src = url; 159 document.head.appendChild(script); 160 } 161 // 调用 162 // loadScript('demo.js', function(){ test(); }); 163 //callback 不可直接写 test ,因为当执行调用代码时, js文件还没有加载,系统无法识别 test 是什么,就会报错, 164 //所以就需要一个立即执行函数,再需要调用时再调用;
兼容各浏览器的功能封装代码
猜你喜欢
转载自www.cnblogs.com/hjysunshine/p/12284410.html
今日推荐
周排行