document.addEventListener('DOMContentLoaded', function() { //动态创建回到首页dom var backDom = document.createElement("div"); backDom.className = "z-back"; backDom.innerHTML = ' '; document.body.appendChild(backDom); //回到首页拖拽效果 //获取屏幕宽高 var screenW = window.screen.availWidth; var screenH = window.screen.availHeight; var dragBox = document.querySelector(".z-back"); dragBox.addEventListener("touchstart", function(e) { var touch = e.touches[0]; startX = touch.pageX; startY = touch.pageY; var left = getCss(dragBox, "left"); var top = getCss(dragBox, "top"); var width = getCss(dragBox, "width"); var height = getCss(dragBox, "height"); dragBox.addEventListener("touchmove", function(e) { e.preventDefault(); var touch = e.touches[0]; var x = touch.pageX - startX; var y = touch.pageY - startY; var nowLeft = left + x; var nowTop = top + y; //边界值处理 if(x > 0){ nowLeft = nowLeft > screenW - width ? screenW - width : nowLeft; }else{ nowLeft = nowLeft > 0 ? nowLeft : 0; } if(y > 0){ nowTop = nowTop > screenH - height ? screenH - height : nowTop; }else{ nowTop = nowTop > 0 ? nowTop : 0; } dragBox.style.left = nowLeft + "px"; dragBox.style.top = nowTop + "px"; }, false); }, false); dragBox.addEventListener("touchend", function(e) { dragBox.removeEventListener("touchstart,touchmove,touchend", function() { }); }, false)}, false);//获取元素样式function getCss(curEle, attr) { var val = null, reg = null; if ("getComputedStyle" in window) { val = window.getComputedStyle(curEle, null)[attr]; } else { if (attr === "opacity") { val = curEle.currentStyle["filter"]; reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i; val = reg.test(val) ? reg.exec(val)[1] / 100 : 1; } else { val = curEle.currentStyle[attr]; } } reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i; return reg.test(val) ? parseFloat(val) : val;}