Определить координаты объекта
Здравствуйте!
Подскажите как реализовать такую задачу, допустим есть такой код на странице документа: Мне необходимо определить координаты этого объекта x,y и далее навести на этот элемент (прокрутить). Координаты x и y должны лежать в переменных для дальнейшего использования..Например чтобы отталкиваясь от их значения найти нужный элемент. В моем случае после этого кода идет флеш баннер - мне нужно "нащупать" его координаты на странице..относительно того объекта который я знаю - див. Например определить координаты верхнего левого угла! элемента (x и у) а далее к ним прибавить нужное число пикселей и получить примерное значение координат баннера. |
|
Не разобрался! Готов оплатить тому кто поможет реализовать, пишите в скайп sanekk2009 кто готов помочь. Бюджет пишите сами, если устроит будем делать:
Необходимо сделать скрипт, который: 1) на странице будет находить определенный элемент с заданным ID (например div) 2) lдалее определять размеры этого ID (например прямоугольник с такими то сторонами), прокручивать страницу к этому элементу 3) Определять каждый раз центр этого элемента на странице с учетом прокрутки и запоминать координаты Все это необходимо чтобы кликать по этому элементу в специальной программе (нужны только координаты х и y), от вас мне необходим лишь рабочий скрипт и правки по ходу дела..у меня есть пример скрипта который я написал, только он не работает по принципу который я написал..нужен рабочий. Пример как это будет работать. 1) зашли на страницу 2) нашли нужный элемент, определили его местоположение 3) прокрутили страницу чтобы он стал видимым 4) определили центр этого объекта и запомнили координаты, положили в переменные. |
первые три пункта:
window.location.hash = '#' + ID |
<!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>
|
Спасибо за помощь, разобрался..!
|
| Часовой пояс GMT +3, время: 01:13. |