ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Линии на изображении вместо курсора
9 сообщений из 9, страница 1 из 1
Линии на изображении вместо курсора
    #39278863
tesla
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tesla
Участник
Доброго всем дня. В одном из блоков сайта находится изображение. Задача убрать курсор, и вместо него отображать 2 линии - горизонтальную и вертикальную, пересекающиеся в месте, где должен находится курсор. Кто-нибудь может подсказать как реализовать данную фишку? http://elvees.ru/ тут на главной так сделано.
...
Рейтинг: 0 / 0
22.07.2016, 16:44
| Ответить | Цитировать | Написать  
Линии на изображении вместо курсора
    #39278874
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
tesla,

там же всё видно, крест рисуется двумя div'ами с белым фоном шириной/выстой в 1px соответственно
положение - вслед за координатами пробегающего мыша

убрать курсор - в стиле - cursor: none
...
Рейтинг: 0 / 0
22.07.2016, 16:56
| Ответить | Цитировать | Написать  
Линии на изображении вместо курсора
    #39278921
tesla
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tesla
Участник
Изопропил, а можно для чайника? Как убрать курсор понятно. В css прописал
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
.vertical_line {
  height: 780px;
  width: 1px;
  background: #ffffff;
  position: absolute;
  left: 0px;
  top: 0px;
}

.horizontal_line {
  height: 1px;
  width: 100%;
  background: #ffffff;
  position: absolute;
  left: 0px;
  top: 0px;
}


Изопропилположение - вслед за координатами пробегающего мыша - вот тут как?
Пока что так:
Код: html
1.
2.
3.
<div class="vertical_line" style="left: 0px;"></div>
<div class="horizontal_line" style="top: 0px;"></div>
<img src="images/img.jpg" alt="" />

, т.е. никак.
...
Рейтинг: 0 / 0
22.07.2016, 17:39
| Ответить | Цитировать | Написать  
Линии на изображении вместо курсора
    #39278929
tesla
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tesla
Участник
Т.е. собственно сам вопрос - как сделать изменение style="left: .....px;" и style="top: .......px;" вслед за курсором?
...
Рейтинг: 0 / 0
22.07.2016, 17:44
| Ответить | Цитировать | Написать  
Линии на изображении вместо курсора
    #39278947
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
tesla,

Чтобы убрать курсор кроссбраузерно, придётся постараться, и то вряд-ли во всех уберёте. 4640103

Вам понятен код ниже?

Код: html
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.
40.
41.
42.
43.
44.
45.
46.
47.
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
  * {
    background: #ffffff;
  }
  #vertical_line {
    height: 20px;
    width: 1px;
    background: #000000;
    position: absolute;
	z-index:1;
  }

  #horizontal_line {
    height: 1px;
    width: 20px;
    background: #000000;
    position: absolute;
	z-index:1;
  }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", init, false);
    function init() {
      document.addEventListener("mousemove", move, true); /* !!! TRUE !!!  - захват */
    }
    function getId(node) { /* Cсылка на объект по его id */
      return typeof node == "object" ? node : document.getElementById(node);
    }
    function move(e) {
      var vl=getId("vertical_line").style,
          hl=getId("horizontal_line").style;
      vl.top=(e.pageY-10)+"px";
      vl.left=(e.pageX)+"px";
      hl.top=(e.pageY)+"px";
      hl.left=(e.pageX-10)+"px";
    }
  </script>
</head>
<body>
  <div id="vertical_line"></div>
  <div id="horizontal_line"></div>
</body>
</html>
...
Рейтинг: 0 / 0
22.07.2016, 18:13
| Ответить | Цитировать | Написать  
Линии на изображении вместо курсора
    #39279030
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
tesla,

решение от бухалтер фантоцци   покруче будет. Альтернативный вариант, больше всего возни, как обычно с IE
Код: html
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.
40.
41.
42.
43.
44.
45.
46.
47.
<!DOCTYPE html>
<head>
  <title>test</title>
  <meta charset="utf-8">
<style>
#vertLine, #horLine {position:absolute; background:#F7F6D2; display:none; z-index:2;}
#vertLine {width:1px;}
#horLine {height:1px;}
#img01, #vertLine, #horLine {cursor:none;}
</style>
</head>
<body>
<img src="http://www.svadba-inform.ru/userfiles/foto_molodozh/cortezh/Lexus_GS.jpg" width="400" height="247" id="img01">
<div id="vertLine"></div>
<div id="horLine"></div>

<script>
function gid(i) {return document.getElementById(i);}
function getElemCoords(elem) { // Координаты элемента относительно всего документа (учитывается прокрутка)
  var box = elem.getBoundingClientRect();
  return {x: box.left + pageXOffset, y: box.top + pageYOffset};
}
var vertLine = gid('vertLine'), horLine = gid('horLine'), img01 = gid('img01'), xx = getElemCoords(img01).x, yy = getElemCoords(img01).y;
vertLine.style.height = img01.offsetHeight + 'px';
horLine.style.width = img01.offsetWidth + 'px';

img01.onmouseenter = function(e) {
  vertLine.style.display = 'block';
  horLine.style.display = 'block';
}

document.addEventListener('mousemove', mov, true);
function mov(e) {
  if (e.target != img01) {
    if (e.target == vertLine || e.target == horLine) {return;}
    vertLine.style.display = 'none'; horLine.style.display = 'none';
  }
  else {
    vertLine.style.top = yy + 'px';
    vertLine.style.left = e.pageX + 'px';
    horLine.style.top = e.pageY + 'px';
    horLine.style.left = xx + 'px';
  }
}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
22.07.2016, 21:54
| Ответить | Цитировать | Написать  
Линии на изображении вместо курсора
    #39279037
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
убрать курсор можно сделав его ерестиком
...
Рейтинг: 0 / 0
22.07.2016, 22:08
| Ответить | Цитировать | Написать  
Линии на изображении вместо курсора
    #39279038
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
user89tesla,

решение от бухалтер фантоцци   покруче будет. Альтернативный вариант, больше всего возни, как обычно с IE
У меня вовсе не решение, только демонстрация, как можно отслеживать перемещение мыши.
У Вас гораздо лучше. Вы можно сказать сделали почти готовый вариант для ТС, что я не стал делать.
...
Рейтинг: 0 / 0
22.07.2016, 22:08
| Ответить | Цитировать | Написать  
Линии на изображении вместо курсора
    #39279105
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
вертикальная линия
Код: html
1.
<hr>




Код: css
1.
2.
3.
4.
5.
6.
7.
8.
hr{
  
   border:none;
   height:1px;
   background-color: green;
   box-sizing: border-box;
   transform: rotate(90deg)
}



переддвижение за мышью- это ещё проще
...
Рейтинг: 0 / 0
23.07.2016, 10:28
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Линии на изображении вместо курсора
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]