博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js移动端 可移动滑块
阅读量:6274 次
发布时间:2019-06-22

本文共 2295 字,大约阅读时间需要 7 分钟。

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;}

 

转载于:https://www.cnblogs.com/zhuzeliang/p/8385805.html

你可能感兴趣的文章
5G将为农村地区做些什么?
查看>>
【翻译】Sklearn 与 TensorFlow 机器学习实用指南 —— 第11章 训练深层神经网络(下)...
查看>>
SQLflow:基于python开发的分布式机器学习平台, 支持通过写sql的方式,运行spark, 机器学习算法, 爬虫...
查看>>
机器学习可行性与VC dimension
查看>>
Nacos 发布 1.0.0 GA 版本,可大规模投入到生产环境
查看>>
关于ovirt主机即做存储又兼虚拟机主机的官方文档说明
查看>>
grep匹配结尾字符串的特殊情况
查看>>
第三方农资电商平台大丰收获华创资本数亿元C轮融资
查看>>
“虎鲸跳跃” 完成300万美元Pre-A轮融资,投资方为蓝湖资本及险峰长青
查看>>
JSON简介
查看>>
深圳安泰创新完成数千万新一轮融资,贝森资本领投
查看>>
当 Kubernetes 遇到阿里云
查看>>
MongoDB与Java 经典面试题、课程,好资源值得收藏
查看>>
标普全球获准进入中国市场,本土评级机构压力山大!
查看>>
阿里云基础产品技术月刊 2019年1月
查看>>
Go 语言的垃圾回收演化历程:垃圾回收和运行时问题
查看>>
苹果收购硅谷创业公司 Silk Labs,将继续布局 AI 和 IoT
查看>>
Idea开发Tomcat应用的热部署配置
查看>>
docker安装mysql
查看>>
GNOME 3.34 发布计划敲定,正式版将于9月11日推出
查看>>