提问有没有大佬能帮我看看这个怎么弄

1年前发布

565

问题:明明写的是图片控制点，但是运行后移动图片没变化只能移动右下角的最小的控制点才能调整，求大神帮帮忙，谢谢(⑅•͈ᴗ•͈).:*♡

<html>
<head>
<style>
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
display: inline-block;
resize: both;
overflow: auto;
width: 80%;
height: 80%;
}
.popup::before {
content: "";
position:fixed;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
background-image: url("");
background-size: cover;
cursor: move;
}
.popup::after {
content: "";
position:fixed;
z-index: 9999;
right: -2.5px;
bottom: -2px;
width: 100px;
height: 100px;
background-image: url("https://img1.baidu.com/it/u=2371355290,1190339921&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=320");
background-size: cover;
cursor: se-resize;
}
.ppw{
width:100%;
height:100vh;
position:absolute;
top:0%;
left:0%;
}
</style>
<script src="js/jq.js"></script>
</head>
<body>
<div id="popup" class="popup">
<iframe src="https://4399.com" class="ppw"></iframe>
</div>
<script>
var popup = document.getElementById("popup");
var moveIcon = popup.querySelector("::before");
var isMoving = false;
var startOffsetX = 0;
var startOffsetY = 0;
moveIcon.addEventListener("mousedown", function(event) {
isMoving = true;
startOffsetX = event.clientX - popup.offsetLeft;
startOffsetY = event.clientY - popup.offsetTop;
});
document.addEventListener("mousemove", function(event) {
if (isMoving) {
var newLeft = event.clientX - startOffsetX;
var newTop = event.clientY - startOffsetY;
popup.style.left = newLeft + "px";
popup.style.top = newTop + "px";
}
});
document.addEventListener("mouseup", function() {
isMoving = false;
});
</script>
</body>
</html>

1人已评分

回答5

只看作者

最新最热

- Kysou0
  并且推荐使用window.onmouseout检测用户的鼠标是否移出屏幕，否则可能造成浏览器误判仍然在进行mousemove的过程中，若window.onmouseout，应将isMoving改为false
  1年前河南回复

Kysou

整体代码：





.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
display: inline-block;
resize: both;
overflow: auto;
width: 80%;
height: 80%;
}
.popup ::before {
content: "";
position:fixed;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
background-image: url("");
background-size: cover;
cursor: move;
}
.popup .after {
content: "";
position:fixed;
z-index: 9999;
right: -2.5px;
bottom: -2px;
width: 100px;
height: 100px;
background-image: url("https://img1.baidu.com/it/u=2371355290,1190339921&fm=253&fmt=auto&app=138&f=JPEG?w=570&h=320");
background-size: cover;
cursor: se-resize;
}
.ppw{
width:100%;
height:100vh;
position:absolute;
top:0%;
left:0%;
}









var popup = document.getElementById("popup");
var moveIcon = popup.querySelector(".after");
var isMoving = false;
var startOffsetX = 0;
var startOffsetY = 0;
moveIcon.addEventListener("mousedown", function(event) {
isMoving = true;
startOffsetX = event.clientX - popup.offsetLeft;
startOffsetY = event.clientY - popup.offsetTop;
console.log("mousedown");
});
moveIcon.addEventListener("mousemove", function(event) {
if (isMoving) {
var newLeft = event.clientX - startOffsetX;
var newTop = event.clientY - startOffsetY;
popup.style.left = newLeft + "px";
popup.style.top = newTop + "px";

console.log("mousemove")
}
});
moveIcon.addEventListener("mouseup", function() {
isMoving = false;
console.log("mouseup")
});

1年前河南回复

- Kysou0
  还有就是在下面的mousedown，mousemove，mouseup的操作中，操作的HTMLElement应该是moveIcon对象，不应该是document。
  1年前河南回复
- Kysou0
  经过debug，在第59行的moveIcon变量引用了::before（同时更不能使用querySelector选择伪元素)，应该是引入after才对，因为after才是你图片的地址。
  1年前河南回复
- - Kysou0
    解决办法：在css中，将.popup::after改成.popup .after，然后在js中使用popup.querySelector(".after")获得元素
    1年前河南@Kysou回复