Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/22: Рейтинг темы: голосов - 22, средняя оценка - 4.64
2 / 2 / 0
Регистрация: 19.11.2011
Сообщений: 52

Отслеживание события движения мышью и сдвиг картинки

18.09.2013, 19:59. Показов 4227. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Ну подскажите как реализовать отслеживание движения мыши и при этом сдвигать блок в другое направление, например картинку.
Что-то типа как тут
Если кто кинет готовое решение, то вообще шикарно будет.
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
18.09.2013, 19:59
Ответы с готовыми решениями:

Отслеживание движения платежа
Я не разбираюсь аксесе, поэтому прошу подсказать возможно ли выполнить следующую задачу в аксесе. Я налоговик и мне необходимо отследить...

События с мышью
Привет всем! Помогите разобраться, как сделать так чтобы при наведении на объект (например шапки сайта) он пропадал (это я смогу), а когда...

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

1
 Аватар для JsLoveR
425 / 167 / 48
Регистрация: 05.12.2012
Сообщений: 855
19.09.2013, 09:36
Лучший ответ Сообщение было отмечено GODofART как решение

Решение

CSS
1
2
3
4
5
6
7
8
9
10
11
div { 
        position:absolute;
}
 
#layer {
        background:blue;
        width:300px;
        height:150px;
        top:200px;
        left:300px;
}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
        
        var layer, w, h;
        
        function init() {
            w = (window.innerWidth  || document.documentElement.clientWidth)  * 0.5;
            h = (window.innerHeight || document.documentElement.clientHeight) * 0.5;
            layer = document.getElementById('layer');
            parallaxMove();
        }
        
        function parallaxMove() {
            var centerX = w - layer.offsetWidth  * 0.5;
            var centerY = h - layer.offsetHeight * 0.5;
                
            var x0 = layer.offsetLeft;
            var y0 = layer.offsetTop;
                
            function getX(e) {
                return x0 + (e.pageX - centerX) * 0.2;
            }
        
            function getY(e) {
                return y0 + (e.pageY - centerY) * 0.2;
            }        
    
            document.onmousemove = function(e) {
        
                var x = getX(e);
                //var y = getY(e);
        
                layer.style.left = x + "px";
            //  layer.style.top  = y + "px";
                
            }
        }
        
        window.onload = function() {
            init();
        }
HTML5
1
2
<div id="layer">
</div>
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
19.09.2013, 09:36
Помогаю со студенческими работами здесь

Отслеживание движения мышки, когда она зажата
Всем привет. Задача описана в названии.

JS + cookies. Отслеживание события click
Здравствуйте. Подскажите, как правильно проверить, был ли клик? Есть ли что-то, похожее на .click == true? Запись в кукис ...

Отслеживание события подключения флешки
Есть несколько вопросов: 1. Для отслеживания происходящего в Windows (в данном случае WM_CHANGEDEVICE) всегда ли необходимо создавать...

Отслеживание события поднятия трубки
Здравствуйте. Появилась пролема при дозвоне через голосовой модем. Дело в том, что некоторые модемы не поддерживают событие поднятия...

Отслеживание события нажатия кнопки на форме
Пишу программу - тестер для студентов (заодно выслушаю критику по коду) Есть xml-файлик с вопросами и вариантами ответов, а так же...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Программный отбор значения справочника
Maks 21.03.2026
Процедура ВодителиНачалоВыбора(Элемент, ДанныеВыбора, ВыборДобавлением, СтандартнаяОбработка) / / Отключаем стандартную обработку (стандартное открытие формы выбора без фильтров) . . .
Переходник USB-CAN-GPIO
Eddy_Em 20.03.2026
Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого
Argus19 18.03.2026
Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++
8Observer8 17.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru