在网页上设置小窗口跟随鼠标移动的时候,由于浏览器的特性会出现一些浏览器不兼容的问题
首先实现div块跟随鼠标移动,简单设置一个div块
<body style="height:1000px">
<div id="box1";></div>
</body>
一个简单的div块,下面直接配置一下style,但此时一定注意,style上面一定要设置绝对定位或者相对定位,这里我直接设置绝对定位
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
/*开启绝对定位*/
position: absolute;
}
</style>
然后下面需要使用js代码来实现移动
直接上代码
//获取鼠标定位
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量 加上滚动条的滚动距离
box1.style.left = left+"px";
box1.style.top = top+"px";
此时就可以实现div块跟随鼠标的移动,但是由于浏览器的兼容性问题,还会出现很多问题
首先解决event在IE8以及以下的兼容性问题,event在IE8以及以下是在window下的事件,所以在其他浏览器上没有什么问题,所以需要解决浏览器的兼容
//解决兼容性问题
event = event||window.event;
此时如果浏览器支持event则上述代码块event判断为true,不在进行判断,否则event修改成window.event
此时div块跟随鼠标移动可能会出现鼠标与div块的移动之间出现距离,不会紧随鼠标移动,此时可以使用pageX/pageY
这是为什么呢?
因为clientx/clientY是相对可见窗口的坐标
clientx/clientY时相对整个页面的坐标
但是在ie8中不支持,因此仅仅使用pageX/pageY是不能解决这个问题的
//var left = event.clientX;
var left = event.pageX;
//var top = event.clientY;
var top = event.pageY;
因此我们需要另外去找解决办法,根据clientx/clientY和clientx/clientY的特性,我们可以知道两者的差距仅仅在于可见窗口和整个页面之间的差距,因此我们只需要知道我们设计的网页顶端与可视窗口的距离,即是滚动条的距离
var st = document.body.scrollTop
var sl = document.body.scrollLeft
但这时候又会出现了问题,此时在IE8中仍然行不通,但是在chrome浏览器却可以,这是为什么呢?这是因为
- chrome 认为浏览器的滚动条时body.scrollTop来获取
- 火狐等浏览器认为浏览器的滚动条是html的
- 所以需要解决兼容性问题
//获取滚动条的距离
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
这样便可以解决浏览器的兼容性问题
然后这时候需要在div的偏移量中加入滚动条的距离
//设置div的偏移量 加上滚动条的滚动距离
box1.style.left = left+sl+"px";
box1.style.top = top+st+"px";
如此一来便解决了所有的兼容性问题,div块便会紧密跟随鼠标进行移动啦
下面附上完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
/*开启绝对定位*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box1 = document.getElementById("box1");
document.onmousemove = function(event) {
//解决兼容性问题
event = event || window.event;
/*获取鼠标的定位
clientx/clientY是相对可见窗口的坐标
pageX/pageY时相对整个页面的坐标
但是在ie8中不支持
* */
/*
* 但是我们需要div跟随鼠标移动,则需要知道滚动条的滚动距离
* 我们需要获得滚动条的滚动距离
* chrome 认为浏览器的滚动条时body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是html的
*所以需要解决兼容性问题
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
var left = event.clientX;
//var left = event.pageX;
var top = event.clientY;
//var top = event.pageY;
//设置div的偏移量 加上滚动条的滚动距离
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
};
</script>
</head>
<body style="height:1000px">
<div id="box1" ; ></div>
</body>
</html>