Форум

alerzo · #1 (**permalink**) 02.09.2015, 10:59

Здравствуйте!
Подскажите как реализовать такую задачу, допустим есть такой код на странице документа:

Мне необходимо определить координаты этого объекта x,y и далее навести на этот элемент (прокрутить). Координаты x и y должны лежать в переменных для дальнейшего использования..Например чтобы отталкиваясь от их значения найти нужный элемент. В моем случае после этого кода идет флеш баннер - мне нужно "нащупать" его координаты на странице..относительно того объекта который я знаю - див. Например определить координаты верхнего левого угла! элемента (x и у) а далее к ним прибавить нужное число пикселей и получить примерное значение координат баннера.

EmperioAf · #2 (**permalink**) 02.09.2015, 11:40

https://learn.javascript.ru/coordinates-document

alerzo · #3 (**permalink**) 02.09.2015, 12:41

Не разобрался! Готов оплатить тому кто поможет реализовать, пишите в скайп sanekk2009 кто готов помочь. Бюджет пишите сами, если устроит будем делать:
Необходимо сделать скрипт, который:
1) на странице будет находить определенный элемент с заданным ID (например div)
2) lдалее определять размеры этого ID (например прямоугольник с такими то сторонами), прокручивать страницу к этому элементу
3) Определять каждый раз центр этого элемента на странице с учетом прокрутки и запоминать координаты

Все это необходимо чтобы кликать по этому элементу в специальной программе (нужны только координаты х и y), от вас мне необходим лишь рабочий скрипт и правки по ходу дела..у меня есть пример скрипта который я написал, только он не работает по принципу который я написал..нужен рабочий. Пример как это будет работать.
1) зашли на страницу
2) нашли нужный элемент, определили его местоположение
3) прокрутили страницу чтобы он стал видимым
4) определили центр этого объекта и запомнили координаты, положили в переменные.

BETEPAH · #4 (**permalink**) 02.09.2015, 14:09

первые три пункта:

window.location.hash = '#' + ID

EmperioAf · #5 (**permalink**) 02.09.2015, 14:14

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
button {
  width: 100px;
  height: 200px;
}

#searchItem {
  width: 100px;
  height: 100px;
  margin-left:100px;
  margin-top:100px;
  border: 1px solid red;
}

.lastItem {
  margin-top: 500px;
  margin-left: 500px;
}
</style>
</head>
<body>
<button>Жми</button>
<div id="searchItem">Искомый элемент</div>
<div class="lastItem">lastitem</div>
<script>
var place = {}, center = {};

function getCoords(elem) {
    /*функция возвращает координаты левого верхнего угла DOM-элемента*/
  
  var box = elem.getBoundingClientRect();

  var body = document.body;
  var docEl = document.documentElement;

  
  var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
  var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

  
  var clientTop = docEl.clientTop || body.clientTop || 0;
  var clientLeft = docEl.clientLeft || body.clientLeft || 0;

  
  var top = box.top + scrollTop - clientTop;
  var left = box.left + scrollLeft - clientLeft;

  return {
    top: top,
    left: left
  };
}

function f(){
    //находим нужный элемент
    var searchItem = document.querySelector('#searchItem');
    //получаем все его стилевые свойства
    var computedStyle = getComputedStyle(searchItem);
    //прокручиваем страницу к искомому элементу
    window.scrollTo(getCoords(searchItem)['left'], getCoords(searchItem)['top']);
    //записываем местоположение искомого элемента
    place.x = getCoords(searchItem)['left'];
    place.y = getCoords(searchItem)['top'];
    //вычисляем и записываем координаты центра искомого элемента
    center.x = getCoords(searchItem)['left'] + (parseInt(computedStyle.width)/2) + 'px';
    center.y = getCoords(searchItem)['top'] + (parseInt(computedStyle.height)/2) + 'px';
    //выводим координаты центра искомого элемента
    alert('Координата x центра искомого элемента: '+center.x);
    alert('Координата y центра искомого элемента: '+center.y);
    alert('Координата x левого верхнего угла искомого элемента: '+place.x);
    alert('Координата y левого верхнего угла искомого элемента: '+place.y);
}

document.querySelector('button').addEventListener('click', f, false);
</script>
</body>
</html>

alerzo · #6 (**permalink**) 02.09.2015, 15:20

Спасибо за помощь, разобрался..!

Форум

Справочник

Discord чат

Курсы javascript