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

本文共 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

你可能感兴趣的文章
微软云计算介绍与实践(实践之二十)
查看>>
备份数据库的shell脚本
查看>>
《从0到1学习Flink》—— Data Source 介绍
查看>>
从零开始认识iptables
查看>>
cacti插件monitor
查看>>
selinux与ftp
查看>>
Ubuntu搭建NIS从服务器步骤
查看>>
scala中Ordered和Ordering的区别
查看>>
文字排版中的设计四原则(三)
查看>>
我的友情链接
查看>>
JavaSE 学习参考:常量
查看>>
netapp 2个控制器spare盘分配
查看>>
我的友情链接
查看>>
华为AR2220E-S 设置限制上网时间
查看>>
实现cell的点击高亮
查看>>
如何用腾讯云打造一款微视频APP
查看>>
linux内核中的hook函数详解
查看>>
调用手机GPS实现当前位置定位并展现百度地图上
查看>>
Dota2卡牌游戏《Artifact》登陆Windows/Mac/Linux
查看>>
ruby向数据库用语句插入数据
查看>>