Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
nekto44
0 / 0 / 0
Регистрация: 23.03.2016
Сообщений: 6
1

Выпадающее изображение и движение за мышкой

27.08.2016, 20:31. Просмотров 619. Ответов 6
Метки нет (Все метки)

Приветствую. Сразу скажу что в Java я полнейший ноль, то о чем я сейчас хочу спросить, это первое, что понадобилось мне реализовать используя Java, поэтому даже не интересовался ею.

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

Прошу не пинать ногами, поиск юзал, но там не совсем то, что мне надо.
Надеюсь на вашу помощь, спасибо.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
27.08.2016, 20:31
Ответы с готовыми решениями:

Движение картинки мышкой
Товарищи. Есть картинка, надо чтобы наведя на неё и нажав левую кнопку мыши можно было её...

Как ускорить движение объекта мышкой?
http://beta.maquetter.com/client зажимаю мышку на картинке - двигаю картинку влево-вправо - она...

Движение объекта за мышкой с заданной скоростью
Привет. Собственно вопрос, как сделать движение объекта за мышкой с заданной скоростью, да так,...

Движение объекта мышкой
Здравствуйте ув.Форумчане Только начинаю изучать винформ, и возник вопрос: Есть какая-то область,...

Движение камеры мышкой
Хочу сделать управление камерой как в шутерах, но что то не так... У меня камера при движени мышкой...

6
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2899 / 2460 / 1053
Регистрация: 15.12.2012
Сообщений: 9,102
Записей в блоге: 7
27.08.2016, 20:42 2
nekto44, я конечно дико извиняюсь, но причём тут Java? Java - это независимый ООП... Не путайте его с javascript - это разные вещи... То что вы просите можно легко сделать с помощью html и css...
1
nekto44
0 / 0 / 0
Регистрация: 23.03.2016
Сообщений: 6
27.08.2016, 20:57  [ТС] 3
Ну я же говорю, полный ноль. даже яву с яваскриптом попутал. Fedor92, очень хотелось бы узнать как это сделать, в идеале готовый пример, чтобы по нему разобраться.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2899 / 2460 / 1053
Регистрация: 15.12.2012
Сообщений: 9,102
Записей в блоге: 7
27.08.2016, 21:32 4
nekto44, вот простенький пример...
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing:border-box; margin: 0; padding: 0}
        html,body{width: 100%; height: 100%}
        .block{position:relative; width:200px; height:40px; border:1px solid red}
        img{position:absolute; right:0; z-index:9999; box-shadow: 0 0 3px 3px rgba(0,0,0,0.3); display:none}
        .block:hover img{display:block}
    </style>
</head>
<body>
    <div class="block">
        <a href="">Товар</a>
        <img src="http://bvr-ivanovo.ru//upload/iblock/0be/bruki_oxford_seriy_kmf%201.jpg" alt="">
    </div>
    <div class="block">
        <a href="">Товар</a>
        <img src="http://bvr-ivanovo.ru//upload/iblock/0be/bruki_oxford_seriy_kmf%201.jpg" alt="">
    </div>
</body>
</html>
Но, если конечно хотите сделать привязку картинки именно к курсору, то придётся повозиться и с javascript...
1
nekto44
0 / 0 / 0
Регистрация: 23.03.2016
Сообщений: 6
28.08.2016, 00:19  [ТС] 5
Но, если конечно хотите сделать привязку картинки именно к курсору
Fedor92, по сути только это я не смог реализовать, а очень хочется именно привязку к курсору.
у меня был такой код, но выглядит ужасно криво
HTML5
1
2
3
4
5
6
7
8
<script language = "JavaScript">
  function showLinkImage(id) {
    document.getElementById(id).style.display = "block";
  }
  function hideLinkImage(id) {
    document.getElementById(id).style.display = "none";
  }
</script>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table align="center">
  <tr>
    <td align="center" valign="top">
      <a href="#" onmouseover="showLinkImage('float_1')" onmouseout="hideLinkImage('float_1')">Моя бабушка (82 года)</a>
      <div id="float_1" style="display: none; position: absolute;">
        <img src="foto5.jpg" alt="Фото 1" />
      </div>
    </td>
    <td align="center" valign="top">
      <a href="#" onmouseover="showLinkImage('float_2')" onmouseout="hideLinkImage('float_2')">Мой дядя</a>
      <div id="float_2" style="display: none; position: absolute;">
        <img src="foto6.jpg" alt="Фото 2" />
      </div>
    </td>
  </tr>
</table>
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2899 / 2460 / 1053
Регистрация: 15.12.2012
Сообщений: 9,102
Записей в блоге: 7
28.08.2016, 00:50 6
nekto44, схематично это будет выглядеть так:
HTML5
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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <style>
        *{box-sizing:border-box; margin: 0; padding: 0}
        html,body{width: 100%; height: 100%}
        #image {display:none; position:absolute; box-shadow: 0 0 3px 3px rgba(0,0,0,0.5)}
        .block{position:relative; width:200px; height:40px; border:1px solid red}
        .block:hover #image{display:block}
    </style>
</head>
<body>
    <div class="block">
        <a href="">Товар</a>
        <div id="image">
            <img src="http://bvr-ivanovo.ru//upload/iblock/0be/bruki_oxford_seriy_kmf%201.jpg" alt="">
        </div>
    </div>
<script>
var image;
function imouse(){
    if (!image) image = document.getElementById('image');
    image.style.left = event.x + 'px';
    image.style.top = event.y + 'px';
}
document.onmousemove=imouse;
</script>
</body>
</html>
Но здесь нужно серьёзно допиливать под свои нужды...
1
nekto44
0 / 0 / 0
Регистрация: 23.03.2016
Сообщений: 6
29.08.2016, 16:57  [ТС] 7
Выкладываю полностью рабочий исходник, не надо знать что такое массивы и просить знающих людей о великом одолжении. Просто вставить код на сайт и закачать 3 файла.

В main.js (1 строка - /* Start:ссылка на jquery-1.9.0.js*/) изменить на свой путь.
В коде изменить свой путь на main.js и hop_layer.js

Текст просто копируем и вставляем, все работает.

Всем спасибо.
0
Вложения
Тип файла: rar script.rar (203.1 Кб, 7 просмотров)
29.08.2016, 16:57
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
29.08.2016, 16:57

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

Движение мышкой на виртуальной машине
Всем привет. Пишу программу. Запускаться она будет в виртуальной машине Oracle VM VirtualBox....

Gateway NV78 - прыгает изображение при манипуляциях с мышкой
Здравствуйте! Такая проблема - изображение на ноуте прыгает. Если ничего не трогать, то все...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru