Эффект:
Идея:
Используйте событие onmousemove, чтобы получить координаты мыши, затем пройдите через DIV один за другим и, наконец, назначьте координаты мыши DIV.
Код:
Скопируйте код кода следующим образом:
<head runat="сервер">
<title></title>
<style type="text/css">
делитель
{
ширина: 20 пикселей;
высота: 20 пикселей;
фон: #00FFFF;
позиция: абсолютная;
}
</стиль>
<тип сценария="текст/javascript">
document.onmousemove = функция (ев) {
вар div = document.getElementsByTagName('div');
var oEvent = ev событие; //Определение совместимости;
var pos = GetMouse(oEvent); //После определения совместимости используем функцию перемещения координат мыши для получения горизонтальных и вертикальных координат
for (var i = div.length - 1; i > 0; i--) { //Обход DIV, начиная с последнего.
div[i].style.left = div[i - 1].offsetLeft + 'px' //Передаем предыдущее смещение влево следующему;
div[i].style.top = div[i - 1].offsetTop + 'px' //Передаем предыдущее смещениеTop следующему;
}
div[0].style.left = pos.x + 'px' //Придаем абсциссу мыши первому
div[0].style.top = pos.y + 'px' //Установим вертикальную координату мыши для первого
}
function GetMouse(ev) { //Получаем координаты движения мыши
вар ScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
вар ScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return { x: ev.clientX + прокруткаLeft, y: ev.clientY + прокруткаTop }
}
</скрипт>
</голова>
<тело>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
<дел>
</div>
</тело>