两行代码实现边界处理
首先观察下面呢这个图片，如果不想让小黑的边界越过小红，那就需要约束小黑水平和垂直两个方向上的坐标。
- 我们可以直接用一个条件表达式来规定一下小黑的边界，假设小红时浏览器窗口，当然不要忘记给小黑使用绝对定位。
- 首先时小黑的left值：
–如果left<0,就让left=0，否则判断小黑是否超过右边界(l2 > window.innerWidth - d.offsetWidth ),这里记得要减去自身的宽度，同理如果超过了，就让他的left值等于 window.innerWidth - d.offsetWidth ，如果都不满足，那么就说明小黑没有越界。 - 小黑的top值的确定同理。
l2 = l2 < 0 ? 0 :(l2 > window.innerWidth - d.offsetWidth ? window.innerWidth - d.offsetWidth : l2);
t2 = t2 < 0 ? 0 :(t2 > window.innerHeight - d.offsetHeight ? window.innerHeight - d.offsetHeight : t2);
通过鼠标拖拽元素移动的案例看一下
//CSS样式
<style>
*{
padding: 0;
margin: 0;
}
div{
position: absolute;
width: 100px;
height: 100px;
background-image: url("https://www.xdsucai.cn/wp-content/uploads/2021/02/1612658624-ddc0e23514aaf99.png");
background-position: 100px auto;
background-size: cover;
}
</style>
//body
<body>
<div></div>
</body>
//JS部分
<script>
var d = document.querySelector("div");
// 鼠标按下后，图片跟随指针移动
// 鼠标抬起后，取消移动事件
d.onmousedown = function(e1){
var l1 = this.offsetLeft;
var t1 = this.offsetTop;
var x1 = e1.clientX;
var y1 = e1.clientY;
window.onmousemove = function(e2){
var x2 = e2.clientX;
var y2 = e2.clientY;
var l2 = l1 + x2 - x1;
var t2 = t1 + y2 - y1;
l2 = l2 < 0 ? 0 :(l2 > window.innerWidth - d.offsetWidth ? window.innerWidth - d.offsetWidth : l2);
t2 = t2 < 0 ? 0 :(t2 > window.innerHeight - d.offsetHeight ? window.innerHeight - d.offsetHeight : t2);
d.style.left = l2 + 'px';
d.style.top = t2 + 'px';
}
}
d.onmouseup = function(){
window.onmousemove = null;
}
</script>
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
