文章目录
一、页面未出现滚轮时
1.1效果图
红方块在网页中随鼠标移动
总体实现思路：将鼠标的坐标赋值为div属性，改变div坐标属性值
1.2实现代码
1.CSS及div代码
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
/**
* 开启box1绝对定位,脱离文档流
* 这样box1才能移动
*/
position: absolute;
}
</style>
<body>
<div id="box1"></div>
</body>
2.JS代码
<script type="text/javascript">
window.onload=function(){
//获取box1对象
var box1=document.getElementById("box1");
//为整个文档绑定鼠标事件
document.onmousemove=function(event){
//解决浏览器兼容问题
event = event || window.event;
//获取鼠标坐标
var left = event.clientX;
var top = event.clientY;
//设置Div偏移量，相对于整个页面
box1.style.left=left+"px";
box1.style.top = top+"px";
}
}
</script>
二、当页面出现滚轮时
2.1关于滚轮有关知识
什么时候页面出现滚轮
- 当实际页面大于显示页面
- 好比在写这篇博客时，内容有点多，整个内容页面大于当前显示页面，出现滚轮
用图解释该例子
红色为显示窗口，蓝色为内容窗口
滚轮滑动时出现问题
- 鼠标相对于显示窗口为原点
- div相对于内容窗口为原点
如何解决看下面：
2.2代码实现(浏览器兼容问题)
1.IE8及以上 谷歌,火狐浏览器
- pageX和pageY可以获取相对于当前页面的坐标
具体代码
body代码
<body style="height: 1000px; width: 1200px;">
<div id="box1"></div>
</body>
通过设置内联样式让页面出现滚轮
JS代码实现效果
<script type="text/javascript">
window.onload=function(){
//获取box1对象
var box1=document.getElementById("box1");
//为整个文档绑定鼠标事件
document.onmousemove=function(event){
//解决浏览器兼容问题
event = event || window.event;
//IE8及以上 谷歌,火狐浏览器
//获取鼠标坐标
var left = event.pageX;
var top = event.pageY;
//设置Div偏移量，相对于整个页面
box1.style.left=left+"px";
box1.style.top = top+"px";
}
}
</script>
2.兼容IE8找一个所有浏览器通用的方法
办法要点：div偏移量=鼠标偏移量+滚轮滑动距离
具体代码
Body及CSS代码都不变
JS代码
<script type="text/javascript">
window.onload=function(){
//获取box1对象
var box1=document.getElementById("box1");
//为整个文档绑定鼠标事件
document.onmousemove=function(event){
//解决浏览器兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*
* 谷歌浏览器认为浏览器的滚动条是body的,可以通过body.scrollTop来获取
* 火狐浏览器认为浏览器的滚动条是html的
*/
var st = document.body.scrollTop ||document.documentElement.scrollTop;
var sl = document.body.scrollLeft ||document.documentElement.scrollLeft;
//client为显示窗口坐标
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left+sl+"px";
box1.style.top = top+st+"px";
}
}
</script>
