div跟隨滑鼠移動

標籤：頁面   定位   出現   大小   目標   高度   top   相容   移動   

1、目標是實現div跟隨滑鼠而移動，分三種情況進行實現

a）首先擷取div，進行綁定滑鼠移動事件，給div開啟定位功能

第一種實現方式，假如body的大小跟頁面大小一樣，則可以用這個方法。

1）擷取滑鼠的座標，進行給div座標賦值，實現如下：

var left = event.clientX;var top = event.clientY;box1.style.left = left + "px";box1.style.top = top +"px";

第二種方式，假如body的高度大於可見高度，則會出現捲軸，clientXY擷取的是可見的大小，則多餘的部分則無法實現移動，則需要使用下面的方式實現

但是這種方式不相容IE8，所以如果要相容IE8，則不能使用。pageX是擷取整個頁面的大小

var left = event.pageX;var top = event.pageY;

第三種方式是什麼都可以相容的，涵蓋上面兩種方式的可行度，就是用可見視窗的加上捲軸的高度即可

var st = document.body.scrollTop || document.documentElement.scrollTop;var left = event.clientX;var top = event.clientY;box1.style.left = left + "px";box1.style.top = top + st+"px";

注，left軸也一樣，我這裡只是實現了y軸

 

div跟隨滑鼠移動