Изображение, следующее за мышью в

#javascript

Вопрос:

Как я могу заставить изображение следовать за мышью в определенном <div> ?

Я знаю, что могу получить положение мыши из e.pageX amp; e.pageY и с помощью кода document.onmousemove = followmouse; . Запускайте followmouse функцию каждый раз, когда мышь перемещается по странице, и в followmouse функции устанавливайте положение изображения в положение мыши. Что касается точного вопроса, который я задал здесь (как я могу заставить изображение следовать за мышью в определенном <div> ), у меня есть эта идея:

Найдите мой div top, left, width и height и выполните некоторые вычисления, и если мышь выйдет из div , установите visibility:hidden значение для изображения.

Но нет ли какого-нибудь простого способа сделать это?

1. Это называется всплывающей подсказкой, а в jquery и mootools есть множество плагинов для выполнения различных действий с помощью всплывающих подсказок.

2. @Marc есть ли какой-нибудь пример кода на javascript ? я не хочу использовать jquery. и где я могу найти эти всплывающие подсказки

3. jquery и mootools — ЭТО javascript. Это просто вспомогательные библиотеки, и они были бы самым простым методом выполнения того, что вы хотите. Они обрабатывают все глупые несовместимости браузера для вас. Если вы хотите создать свою собственную библиотеку всплывающих подсказок, продолжайте, но вы потратите много времени на то, чтобы заставить ее работать в каждом браузере.

4. я знаю, что это так, но мне нужно больше функций для ускорения, и иногда jquery не подходит

Ответ №1:

Давайте предположим, что у вас есть какой-нибудь HTML, подобный этому,

 <div id="mydiv" style="width: 300px; height: 300px;"></div>
<img id="myimg" style="position: absolute;" alt="" />

затем

 document.getElementById("mydiv").onmousemove = function(e) {
    document.getElementById("myimg").style.top = e.pageY*1   5   "px";
    document.getElementById("myimg").style.left = e.pageX*1   5   "px";
}

переместил бы ваше изображение на мышь, только если мышь находится над div .

1. я не смог запустить ваши коды? изображение не перемещается. и можете ли вы объяснить значение e.pageY*1 5 "px"

2. @hamze вы можете попробовать мой код здесь: jsfiddle.net/inti/j7eMz Часть, которую вы запрашиваете, означает: координату X мыши, умноженную на 1, чтобы убедиться, что это целое число, затем добавьте 5 для небольшого расстояния от мыши и, наконец, «px», начиная со стиля. left принимает значения с некоторой единицей измерения.

3. это связано с проводами, когда я добавляю ваш код в htm файл, изображение не перемещается, и я получаю эту ошибку : document.getElementById("mydiv") is null

4. @hamze "mydiv" является id из div в моем примере. Вы должны изменить его на id свой div . То же самое относится к "myimg" . Кроме того, этот код javascript должен выполняться после того, как ваш div был создан на странице.

Ответ №2:

Пока изображение действительно содержится в div и вы перемещаете его относительно его нормального положения, я думаю, что настройка overflow:hidden на содержащем div должна работать. Когда я говорю «настройка», я имею в виду не каждый раз, когда мышь перемещается наружу, а только один раз в основном CSS.