html5跟随div效果,javascript DIV实现跟随鼠标移动

本文实例为大家分享了javascript DIV实现跟随鼠标移动的具体代码，供大家参考，具体内容如下

首先介绍的是一个div跟随鼠标移动的效果，具体代码如下

javascript div跟随鼠标移动

window.onload = function () {

var div1 = document.getElementById('div1');

document.onmousemove = function (ev) {

//IE支持event，firefox不支持

var oEvent = ev || event;

//

var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

div1.style.top = oEvent.clientY + scrollTop + 'px'; //Y

div1.style.left = oEvent.clientX + scrollLeft + 'px';//X

};

};

现在为大家分享的是javascript 一串DIV跟随鼠标移动

div {

width: 2px;

height: 2px;

background-color: red;

position: absolute;

}

window.onload = function () {

var oDivs = document.getElementsByTagName('div');

document.onmousemove = function (ev) {

var oEvent = ev || event;

document.getElementsByTagName('span')[0].innerHTML = oEvent.clientY + '|' + oEvent.clientX;

for (var i = oDivs.length-1; i > 0; i--) {

oDivs[i].style.top = oDivs[i - 1].style.top;

oDivs[i].style.left = oDivs[i - 1].style.left;

}

oDivs[0].style.top = oEvent.clientY+'px';

oDivs[0].style.left = oEvent.clientX + 'px';

};

};

以上就是本文的全部内容，希望对大家的学习有所帮助。