Привет, я неоднократно искал форум и Google - пробовал все виды разных вещей, но я не могу сделать это ...
Я пытаюсь зашифровать страницу с фиксированным верхним и нижним колонтитулами, центрированная по центру окружность которой динамически меняет размер и не перетекает ни в верхний, ни в нижний колонтитулы.
Пожалуйста, посмотрите на мой пример:
https://jsfiddle.net/p90pq8b3/3/
Я совсем новый, так что все это, но, честно говоря, я немного удивлен, почему
document.getElementById('circle').style.height = document.getElementById ('circle').style.width;
Кажется, игнорируется.
4 ответа
Попробуй: css:
#circle{
position: absolute;
}
Js:
var w = $('#circle').width();
function f() {
$('#circle').height($('#circle').width());
if ($('#circle').height() > $('.wrapper').height()) {
$('#circle').height($('.wrapper').height());
$('#circle').width($('.wrapper').height());
} else if ($('#circle').height() < w) {
$('#circle').width($('.wrapper').height());
}
if ($('#circle').width() > $('.wrapper').width()) {
$('#circle').width($('.wrapper').width());
}
}
f();
$(window).on('resize', function() {
f()
});
https://jsfiddle.net/uyt9z1qp/4/
Всем привет, спасибо за помощь @madalin ivascu и его решению jquery.
Я немного подправил его, так что теперь мне нужны навигационные стрелки и действительно адаптивное решение. Если кому-то интересно, проверьте это.
https://jsfiddle.net/sd34j5k6/
if($('.wrapper').height() > $('.wrapper').width())
{
$('#circle').width($ ('.wrapper').width() *0.7);
$('#circle').height($('.wrapper').width() *0.7 );
}else if( $('.wrapper').width() > $('.wrapper').height() )
{
$('#circle').width($('.wrapper').height() *0.9);
$('#circle').height($('.wrapper').height() *0.9 );
}
Это не вернет ширину
document.getElementById('circle').style.width
Но это будет (без px
)
document.getElementById('circle').offsetWidth
Замените вашу функцию resize
этим, и она должна работать
function resize() {
var circle = document.getElementById('circle');
w = circle.offsetWidth;
circle.style.height = w + 'px';
}
Вот пример на JSFIDDLE.
Просто для протокола: Вы думали о том, чтобы на самом деле использовать настоящий круг? Вы можете встраивать SVG в html. Расчет фактического размера для позиционирования остается.
<svg height="200" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<circle cx="80" cy="80" r="75" stroke="black" stroke-width="1" fill="green" />
<text x="40" y="80" stroke="black">I am a circle!</text>
</g>
</svg>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.