#jquery #html #css
#jquery #HTML #css
Вопрос:
У меня проблема, которую я не мог понять, пожалуйста, помогите:
Я разработал html-страницу с изображениями и сделал их перетаскиваемыми с помощью справки jQuery UI, и я установил для этих изображений положение относительно и дал левый и верхний пиксели, вот ссылка на страницу http://ayyashsigns.com/lab/circles.html
Я установил:
- позиция b1: style=»слева: 180 пикселей; сверху: -334 пикселей; …»
- позиция b2: style=»слева: 233 пикселей; сверху: — 546 пикселей; …»
- позиция b3: style=»слева: 422 пикселей; сверху: -350 пикселей; …»
- позиция mainb: style=»слева: 93 пикселя; сверху: — 330 пикселей; …»
Проблема в том, что когда я запускаю
- $(‘span #b1’).position().top Я получаю 293
- $(‘span #b1’).position().left Я получаю 180
- $(‘span #b2’).position().top Я получаю 81
- $(‘span #b2’).position().left Я получаю 289
- $(‘span #b3’).position().top Я получаю 277
- $(‘span #b3’).position().left Я получаю 534
- $(‘span#mainb’).position().top Я получаю 297
- $(‘span#mainb’).position().left Я получаю 261
Почему вся эта разница, мне нужно получить программный доступ к изображениям с помощью jQuery. Кто-нибудь может мне это объяснить и как это исправить, чтобы указать точное местоположение изображений.
Вот ссылка снова: круги на моей странице
Заранее спасибо за любую помощь,
С уважением,
Ответ №1:
«Метод .position() позволяет нам получить текущую позицию элемента относительно родительского элемента со смещением».
Если вы хотите получить фактическое значение CSS, которое вы использовали, попробуйте использовать :
$('span#b1').css('top');
Шай.
Комментарии:
1. да, это вернет то же значение, которое я поместил внутри стиля, но является ли это точным положением круга внутри DOM и почему высота страницы увеличивается, когда я добавляю больше круга (шара), мне нужно изменить положение изображений программно
2. Чтобы изменить позицию css, просто установите свойство css $(‘span#b1’).css(‘top’, ‘-350px’); Эта позиция в вашем исходном коде относится к исходному местоположению элементов.
Ответ №2:
Измените <p id="monitor"> на <div id="monitor"> и </p> не забудьте также изменить.
Добавьте это в свою таблицу стилей:
body {
margin: 0;
}
#content {
position:relative;
}
#b1 {
top: ##px;
left: ##px;
position:absolute;
}
Используйте position:absolute для всего вашего круга, найдите для него правильный верхний и левый пиксели. Он должен начинаться с верхнего левого края экрана для top:0px; left: 0px;
Теперь, когда вы используете $('span#b1').position().top его, он даст вам правильный пиксель.
К вашему сведению, .position вернет пиксель относительно родительского элемента, .offset вернет пиксель относительно документа.
Комментарии:
1. Мне нужна помощь с jQuery, после установки кругов в правильное положение, я хочу, чтобы какой-нибудь плагин или команда заставили jQuery вернуть круги в положение, в котором они были установлены, например. если пользователь переместил b1 из своей позиции в другую позицию, b1 медленно вернется в исходное положение.
2. Добавьте опцию возврата к вашему перетаскиваемому. вы можете установить скорость с помощью revertDuration . .перетаскиваемый({ revert: true, revertDuration: 1000 });
Ответ №3:
Вы получаете позицию диапазона, который не является блочным элементом. Вы хотите получить положение изображения в пределах диапазона:
$('span#b1 img').offset().top
Комментарии:
1. Я хочу, чтобы положение круга с помощью jQuery было похоже на стиль, как это сделать? Я в замешательстве, если я запускаю введенный вами код, он дает мне 442, а если я запускаю $(‘span#b1 img’).position().top, я получаю -40
Ответ №4:
Я думаю, что в этом случае для вас было бы лучше использовать position:absolute; на каждом из кругов и position:relative продолжать #content . Таким образом, вы получите правильное значение с position().top помощью и position().left .