<!DOCTYPE html>
<html>
<style type="text/css">
.bigshowbutton {
display: block;
position: fixed;
top: 80%;
left: 80%;
border: 1px solid blue;
}
.showbutton {
width: 6.25rem;
height: 6.25rem;
border-radius: 50%;
background-color: skyblue;
text-align: center;
cursor: pointer;
float: right;
vertical-align: middle;
}
</style>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="touchMove" class="bigshowbutton">
<div id="showDiv" style="display: inline-block;"></div>
<!-- <img id="showButton" class="showbutton" src="movePush.gif" /> -->
<div id="showButton" class="showbutton">
<div id=""
style="width: 50px;height: 50px; background-color: aliceblue;margin-top: 25px;margin-left: 25px;border-radius: 10px; border: 1px solid aliceblue;">
<div id=""
style="width: 40px;height: 40px; background-color: white; margin-top: 5px; margin-left: 5px;border-radius: 8px; border: 1px solid white;">
</div>
</div>
</div>
</body>
</html>
<script>
window.onload = function() {
let disx = 0;
let disy = 0;
var oDiv = document.getElementById('touchMove');
var showDiv = document.getElementById("showDiv");
oDiv.onclick = function(e) {
var aa = document.getElementsByClassName("menu-01");
console.log(aa.length);
if(aa.length>0){
showDiv.innerHTML = "";
}else{
showDiv.innerHTML = "";
html = "<div style='cursor: pointer;' class='menu-01' >aa</div>";
html = html +"<div style='cursor: pointer;' class='menu-02' >bb</div>";
html = html +"<div style='cursor: pointer;' class='menu-03' >cc</div>";
showDiv.innerHTML = html;
}
};
oDiv.onmousedown = function(e) {
disx = e.pageX - oDiv.offsetLeft;
disy = e.pageY - oDiv.offsetTop;
document.onmousemove = function(e) {
console.log("move")
oDiv.style.left = e.pageX - disx + 'px';
oDiv.style.top = e.pageY - disy + 'px';
};
//释放鼠标按钮，将事件清空，否则始终会跟着鼠标移动
document.onmouseup = function() {
console.log("up2")
document.onmousemove = null;
document.onmousedown = null;
};
};
}
</script>
1016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
