Недавно мне понадобилась такая функция для проекта, над которым я работал, оказалось, что мне пришлось использовать для сторон, чтобы создать поле, потому что в противном случае event.target
при перемещении мыши оказался бы селектором, и если бы я использовал z-index: -1
было бы немного подозрительно, если бы у вас было много перекрывающихся элементов... и т.д.
Вот версия, которую я преобразовал из своего проекта для вашего удобства, она использует jQuery, но ее чрезвычайно просто преобразовать в vanilla, так как используются только методы mousemove
и css
из jQuery.
Пошаговые инструкции.
Сначала создайте необходимые 5 элементов HTML.
<div id="selector">
<div id="selector-top"></div>
<div id="selector-left"></div>
<div id="selector-right"></div>
<div id="selector-bottom"></div>
</div>
Во-вторых, создайте событие mousemove
в document
(или в вашем контейнере)
$(document).mousemove(function(event) { ... });
Затем внутри mousemove
мы проведем базовую проверку, чтобы предотвратить выбор HTML, BODY, selector
var id = event.target.id, tagName = event.target.tagName;
if(id.indexOf('selector') !== -1 || tagName === 'BODY' || tagName === 'HTML') {
return;
}
Затем нам нужно создать объект для хранения наших элементов.
var elements = {
top: $('#selector-top'),
left: $('#selector-left'),
right: $('#selector-right'),
bottom: $('#selector-bottom')
};
После этого мы сохраняем некоторые переменные, которые содержат некоторую информацию о целевом элементе, например.
var $target = event.target;
targetOffset = $target.getBoundingClientRect(),
targetHeight = targetOffset.height,
targetWidth = targetOffset.width;
Затем все, что мы делаем, это вычисляем position и height для всех 4 сторон селектора.
elements.top.css({
left: (targetOffset.left - 4),
top: (targetOffset.top - 4),
width: (targetWidth + 5)
});
elements.bottom.css({
top: (targetOffset.top + targetHeight + 1),
left: (targetOffset.left - 3),
width: (targetWidth + 4)
});
elements.left.css({
left: (targetOffset.left - 5),
top: (targetOffset.top - 4),
height: (targetHeight + 8)
});
elements.right.css({
left: (targetOffset.left + targetWidth + 1),
top: (targetOffset.top - 4),
height: (targetHeight + 8)
});
Все +aFewPixels
— это всего лишь небольшая оптимизация, так что между селектором и целью остается около 2px
промежутка.
Для CSS
это то, что я придумал.
#selector-top, #selector-bottom {
background: blue;
height:3px;
position: fixed;
transition:all 300ms ease;
}
#selector-left, #selector-right {
background: blue;
width:3px;
position: fixed;
transition:all 300ms ease;
}
transition
придает селектору очень приятный эффект скольжения.
Примечание. Это также работает для transform: scale(2);
, например. когда элемент масштабируется по размеру.
Редактировать: я только что обновил это, я заметил, что объект elements
был внутри обработчика событий, я переместил его наружу в демонстрации, это очень важно повышение производительности, поскольку теперь объект elements
создается только один раз вместо сотни тысяч, если не миллионы раз внутри события mousemove
.
person
iConnor
schedule
07.09.2013
~/.mozilla/firefox/random-chars.default/extensions/[email protected]/content/firebug
В Vista это что-то вроде:C:\Users\<user-name>\AppData\Roaming\Mozilla\Firefox\Profiles\random-chars.default\extensions\[email protected]\content\firebug
- person Amarghosh   schedule 08.03.2010