实现div块跟随鼠标移动，并解决浏览器不兼容性问题

在网页上设置小窗口跟随鼠标移动的时候，由于浏览器的特性会出现一些浏览器不兼容的问题

首先实现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>

loving-cat

发布了4 篇原创文章 · 获赞 11 · 访问量 192

私信关注

实现div块跟随鼠标移动，并解决浏览器不兼容性问题

猜你喜欢