请给我一个完整的代码包括head body
时间: 2024-02-27 21:59:08 浏览: 104
好的,下面是一个完整的HTML代码,包括`head`和`body`部分:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滚动盒子从旁边出来</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
position: fixed;
top: 50%;
left: -100px;
transform: translateY(-50%);
transition: all 0.5s ease-in-out;
}
</style>
</head>
<body>
<div class="box">这是一个盒子</div>
<script>
// 监听鼠标滚动事件
window.addEventListener('scroll', function() {
// 获取盒子元素
var box = document.querySelector('.box');
// 获取鼠标滚动的距离
var scrollDistance = document.documentElement.scrollTop || document.body.scrollTop || 0;
// 判断鼠标滚动的距离是否超过了一定的值
if (scrollDistance > 200) {
// 如果超过了一定的值,就将盒子元素移动到屏幕中央
box.style.left = '50px';
} else {
// 如果没有超过一定的值,就将盒子元素移回原来的位置
box.style.left = '-100px';
}
});
</script>
</body>
</html>
```
请注意,这只是一个示例代码,你可以根据自己的需要进行修改和优化。