这几天一直补作业,今天来更新了。之前访问其他博客时,我看见有些图案可以随鼠标移动的效果,是那种浮动的,今天我们就做一个简单的div随鼠标移动吧
效果 可以随鼠标随意移动喔
#box1{
width: 100px;
height: 100px;
background-color: blueviolet;
position: absolute;
}
html代码,就简单的div图片
<box id="box1"></box>
js代码
window.onload=function(){
//使div可以随鼠标移动
//获取box1
var box1=document.getElementById("box1");
document.onmousemove=function(event){
//这里event事件对象,当事件响应函数被触发时,浏览器每次都会将事件对象
//作为实参传递,就算不写形参也会传递,但是写了之后,更容易调用
//获取滚动条的距离
var st=document.documentElement.scrollTop;
console.log(st);
//获取鼠标的坐标
var left=event.clientX;
var top=event.clientY;
box1.style.left=left+st+"px";
box1.style.top=top+st+"px";
}
}
1.由于使用了box1.style.left,一定注意偏移量只对开启定位的元素有效,所以box一定要开启相对或者绝对定位,
2.并且注意 div的偏移量是是相对整个页面
3.注意 获取到的left是数值,要加上单位
4.clientX与clientY是用来获取坐标的,用于获取鼠标在当前可见窗口的坐标
所以要理解有滚动条时的计算
图解
下一篇博客我们将介绍事件冒泡,事件委派,大家一起进步呀