本文给大家分享的是使用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 = ' <div></div>' ;
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/2)){//在上半部分
if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分
if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近上方
fdiv.style.top="0px";
}else{//靠近左边
fdiv.style.left="0px";
}
}else{//在右半部分
if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方
fdiv.style.top="0px";
}else{//靠近右边
fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
}
}
}else{ //下半部分
if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分
if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近下方
fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
}else{//靠近左边
fdiv.style.left="0px";
}
}else{//在右半部分
if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方
fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
}else{//靠近右边
fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
}
}
}
}
function mousemove(ev)
{
if(ev==null){ ev = window.event;}//IE
if((ev.clientY - posY)<=0){//超过顶部
fdiv.style.top="0px";
}else if((ev.clientY - posY) >(screenHeight-parseInt(fdiv.clientHeight))){//超过底部
fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
}else{
fdiv.style.top = (ev.clientY - posY) + "px";
}
if((ev.clientX- posX)<=0){//超过左边
fdiv.style.left="0px";
}else 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)<=0){//超过顶部
fdiv.style.top="0px";
}else 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<=0){//超过左边
fdiv.style.left="0px";
}else 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
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script src="web-touch.js" type="text/javascript"></script>
</html>
演示图
- 关于试用期转正个人工作总结合集
- 简洁的试用期转正工作总结
- 行政主管试用期工作总结及计划
- 前台试用期工作总结
- 最新前台员工试用期转正工作总结
- 试用期工作总结与计划
- 转正有关的工作总结模板10篇
- 员工转正工作总结汇报范文
- 营业员试用期工作总结
- 员工试用期总结模板5篇
- 个人转正工作总结最新汇总大全【5篇】
- 转正定岗个人总结精选
- 银行员工转正申请工作总结10篇
- 员工转正自我总结怎么写7篇
- 新员工试用期间工作总结
- 程序员试用期总结报告
- 试用期转正工作总结怎么写简短
- 个人转正工作总结500字
- 试用期总结范文2000字
- 3000字试用期总结
- 2023试用期转正总结ppt
- 转正个人总结3000字怎么写
- 试用期2500字总结
- 客服试用期工作总结5篇
- 新员工转正总结1000字
- pedophile-ring
- pedophilia
- peduncle
- pee
- Peeblesshire
- peed
- peeing
- peek
- peek-a-boo
- peekaboo
- 蓑羽鹤
- 蓑草
- 蓑衣
- 蓑衣草
- 蓑鲉
- 蓓
- 蓓蕾
- 蓖
- 蓖麻
- 蓖麻油
- 南京林业大学2013年非全日制专业学位招生入学考试复试资格线及考试通知
- 2014年湖南省硕士研究生入学考试考场规则
- 湖南师范大学2014年报考美术学院硕士研究生考生考试的通知
- 成都信息工程学院2014年攻读硕士学位研究生招生专业目录(通信工程学院)
- 2014年全国硕士研究生入学考试华中师范大学考点考前须知/座位查询
- 成都信息工程学院2014年攻读硕士学位研究生招生专业目录(电子工程学院)
- 成都信息工程学院2014年攻读硕士学位研究生招生专业目录(资源环境学院)
- 成都信息工程学院2014年攻读硕士学位研究生招生专业目录(大气科学学院)
- 华中师范大学2014年硕士研究生素描(含速写/色彩)科目考试安排通知
- 2014年全国硕士研究生入学考试华中师范大学考点查询初试考场