一、代码区域
1.css样式
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
</style>
2.在页面放置一个容器
<div class="box"></div>
3.Javascript 代码
// 1)获取盒子
var box = document.querySelector(".box");
// 2)绑定鼠标移动事件
document.onmousemove = function (e) {
// 获取鼠标在页面上的位置
var pageX = e.pageX;
var pageY = e.pageY;
// 设置盒子附近的取值范围
var x = pageX - (100 / 2);
var y = pageY - (100 / 2);
// 设置盒子当前位置
box.style.left = x + "px";
box.style.top = y + "px";
}
个人总结:
该功能的实现主要需要用户掌握css中一些基本样式,鼠标移动事件(mousemove)以及了解如何通过 Javascript代码实现对容器样式的控制。
注: 博主每天记录自己所学,如有写的不好之处,希望您能不吝赐教,给我一些关于这个项目的意见和建议。各位的宝贵意见将对我产生深远的影响,我将认真倾听并尽力改进。当然也请各位动动您的手指,点点赞。(。◕ˇ∀ˇ◕)谢谢各位~~