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

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

убрать курсор - в стиле - cursor: none
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2016, 17:39
    #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:44
    #39278929
tesla
tesla
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Линии на изображении вместо курсора
Т.е. собственно сам вопрос - как сделать изменение style="left: .....px;" и style="top: .......px;" вслед за курсором?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2016, 18:13
    #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, 21:54
    #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, 22:08
    #39279037
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Линии на изображении вместо курсора
убрать курсор можно сделав его ерестиком
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.07.2016, 22:08
    #39279038
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Линии на изображении вместо курсора
user89tesla,

решение от бухалтер фантоцци   покруче будет. Альтернативный вариант, больше всего возни, как обычно с IE
У меня вовсе не решение, только демонстрация, как можно отслеживать перемещение мыши.
У Вас гораздо лучше. Вы можно сказать сделали почти готовый вариант для ТС, что я не стал делать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.07.2016, 10:28
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Линии на изображении вместо курсора / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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