Javascript实现苹果悬浮虚拟按钮_javascript技巧
程序员文章站
2022-04-17 23:37:16
...
Javascript实现苹果悬浮虚拟按钮
直接引入代码到页面即可
代码有部分冗余的地方,有兴趣的小伙伴可也自己修改
如果有什么BUG 记得评论 告诉我哦
web-touch.js
var new_element_N=document.createElement("style"); new_element_N.innerHTML = '#drager {' + ' position: fixed;' + ' width: 35px;' + ' height: 35px;' + ' background-color: rgba(0, 0, 0, 0.2);' + ' z-index: 10000;' + ' cursor: pointer;' + ' top: 0px;' + ' left: 0px;' + ' border-radius: 30%;' + ' padding: 6px;' + ' }' + ' ' + ' #drager>div {' + ' border-radius: 50%;' + ' width: 100%;' + ' height: 100%;' + ' background-color: rgba(0, 0, 0, 0.3);' + ' transition: all 0.2s;' + ' -webkit-transition: all 0.2s;' + ' -moz-transition: all 0.2s;' + ' -o-transition: all 0.2s;' + ' }' + ' #drager:hover>div{' + ' background-color: rgba(0, 0, 0, 0.6);' + ' } '; document.body.appendChild(new_element_N); new_element_N=document.createElement('div'); new_element_N.setAttribute("id","drager"); new_element_N.style.top="100px"; new_element_N.style.left="100px"; new_element_N.innerHTML = ' ' ; document.body.appendChild(new_element_N); // // var posX; var posY; var screenWidth =document.documentElement.clientWidth; var screenHeight = document.documentElement.clientHeight; var fdiv = document.getElementById("drager"); fdiv.onmousedown=function(e) { screenWidth =document.documentElement.clientWidth; screenHeight = document.documentElement.clientHeight; if(!e){ e = window.event; } //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function()//释放时自动贴到最近位置 { document.onmousemove = null; if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)(screenHeight-parseInt(fdiv.clientHeight))){//超过底部 fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{ fdiv.style.top = (ev.clientY - posY) + "px"; } if((ev.clientX- posX)(screenWidth-parseInt(fdiv.clientWidth))){//超过右边 fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px"; }else{ fdiv.style.left = (ev.clientX - posX) + "px"; } // console.log( posX +" "+ fdiv.style.left); } window.onload = window.onresize = function() { //窗口大小改变事件 screenWidth =document.documentElement.clientWidth; screenHeight = document.documentElement.clientHeight; if( (parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight))>screenHeight){//窗口改变适应超出的部分 fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; } if( (parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth))>screenWidth){//窗口改变适应超出的部分 fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px"; } document.onmouseup.apply() }; fdiv.addEventListener('touchstart', fdiv.onmousedown, false); fdiv.addEventListener('touchmove', function(event) { // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) { event.preventDefault();// 阻止浏览器默认事件,重要 var touch = event.targetTouches[0]; if((touch.pageY)(screenHeight-parseInt(fdiv.clientHeight))){//超过底部 fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px"; }else{ fdiv.style.top = (touch.pageY-parseInt(fdiv.clientHeight)/2) + "px"; } if(touch.pageX(screenWidth-parseInt(fdiv.clientWidth))){//超过右边 fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px"; }else{ fdiv.style.left = (touch.pageX-parseInt(fdiv.clientWidth)/2) + "px"; } } }, false); fdiv.addEventListener('touchend', document.onmouseup , false); fdiv.ondblclick=function(){//双击事件可能在手机端浏览器会与网页缩放事件冲突 alert("发挥你们的想象力吧"); }
html
Document
演示图
上一篇: php中不等运算符是什么
下一篇: win10系统重置后很卡怎么办
推荐阅读
-
CocosCreator项目学习系列<二>关于Button(添加事件)输入控制交互条件的触发_实现虚拟按钮控制_JavaScript
-
JavaScript 弹出窗体点击按钮返回选择数据的实现_javascript技巧
-
JS/jQuery实现默认显示部分文字点击按钮显示全部内容_javascript技巧
-
JavaScript 悬浮窗口实现代码_javascript技巧
-
JavaScript实现点击按钮后变灰避免多次重复提交_javascript技巧
-
javascript实现十秒钟后注册按钮可点击的方法_javascript技巧
-
js实现点击注册按钮开始读秒倒计时的小例子_javascript技巧
-
使用js实现按钮控制文本框加1减1应用于小时+分钟_javascript技巧
-
JS实现点击按钮自动增加一个单元格的方法_javascript技巧
-
js实现带按钮的上下滚动效果_javascript技巧