做小方块效果 要求:1.小方块活动范围在边框里 2.小方块靠近边框可以吸上去
时间: 2024-03-17 07:39:42 浏览: 21
好的,我来回答你的问题。
对于小方块效果,你可以通过以下步骤来实现:
1. 创建一个包含边框的容器,并将其设置为相对定位。
2. 在容器中创建一个可以移动的小方块,并将其设置为绝对定位。
3. 为小方块添加事件监听器,当其移动到边框附近时,将其吸附到边框上。
具体实现方式可以参考以下示例代码:
HTML:
```html
<div class="container">
<div class="block"></div>
</div>
```
CSS:
```css
.container {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative;
}
.block {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
JavaScript:
```javascript
const container = document.querySelector('.container');
const block = document.querySelector('.block');
const blockWidth = block.offsetWidth;
const blockHeight = block.offsetHeight;
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
block.addEventListener('mousemove', function(event) {
const x = event.clientX - container.offsetLeft - blockWidth / 2;
const y = event.clientY - container.offsetTop - blockHeight / 2;
if (x < 0) {
block.style.left = 0;
} else if (x > containerWidth - blockWidth) {
block.style.left = containerWidth - blockWidth + 'px';
} else {
block.style.left = x + 'px';
}
if (y < 0) {
block.style.top = 0;
} else if (y > containerHeight - blockHeight) {
block.style.top = containerHeight - blockHeight + 'px';
} else {
block.style.top = y + 'px';
}
});
block.addEventListener('mouseout', function() {
const x = parseInt(block.style.left);
const y = parseInt(block.style.top);
if (x < blockWidth / 2) {
block.style.left = 0;
} else if (x > containerWidth - blockWidth / 2) {
block.style.left = containerWidth - blockWidth + 'px';
}
if (y < blockHeight / 2) {
block.style.top = 0;
} else if (y > containerHeight - blockHeight / 2) {
block.style.top = containerHeight - blockHeight + 'px';
}
});
```
在这个示例中,我们首先创建了一个容器和一个小方块,并将它们分别命名为 `.container` 和 `.block`。我们将容器设置为相对定位,将小方块设置为绝对定位,并将其垂直居中在容器中间。
接着,我们为小方块添加了两个事件监听器。当鼠标在小方块上移动时,我们通过计算鼠标的位置来改变小方块的位置。如果小方块的位置超出了容器的边界,我们就将其吸附到边框上。当鼠标移出小方块时,我们判断小方块是否靠近边框,并将其吸附到边框上。
希望这个示例对你有所帮助!
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)