<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
#box{
height: 100px;
width: 100px;
position: absolute;
cursor: move;
background:deeppink;
}
</style>
</head>
<body>
<div id="box">
<p id="p"></p>
</div>
</body>
</html>
<!-- 2.窗口拖拽
实现拖拽功能
实现最大化,最小化 -->
<script>
var box = document.querySelector("#box");
box.onmousedown = function(evt){
var e = evt || event;
var ofX = e.offsetX;
var ofY = e.offsetY;
document.onmousemove = function(evt){
var e = evt || event;
var x = e.pageX - ofX;
var y = e.pageY - ofY;
if(x<0){
x = 0;
}
var maxX = window.innerWidth - box.offsetWidth;
if(x>maxX){
x = maxX;
}
if(y<0){
y = 0;
}
var maxY = window.innerHeight - box.offsetHeight;
if(y>maxY){
y = maxY;
}
box.style.left = x + "px";
box.style.top = y + "px";
}
document.onmouseup = function(){
document.onmousemove = "";
}
}
var i=0;
var p=document.getElementById("p");
p.innerHTML="双击变大";
box.ondblclick=function(){
i++;
if(i%2==1){
box.style.width="100%";
box.style.height="100%";
p.innerHTML="双击变小";
}
else if(i%2==0){
box.style.width="100px";
box.style.height="100px";
p.innerHTML="双击变大";
}
}
</script>
js实现窗口拖拽,并且双击最大最小
最新推荐文章于 2022-07-26 19:33:26 发布