0

Нужно верно расположить marked

let start = 20; // Значение может меняться
let end = 165; // Значение может меняться
let marked = 58; // Значение может меняться

$('.line').css('top', marked);
.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
  position: relative;
}
.line {
  width: 100px;
  height: 1px;
  background: #333;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="line"></div>
</div>

введите сюда описание изображения

Поправьте если я некорректно сформулировал вопрос

5
  • @Sevastopol', Здесь скорее всего задача кто математику знает, нужно составить формулу чтобы получить пиксели
    – Squeli47
    23 апр 2021 в 7:24
  • @Sevastopol', start 20 это 0px, end 165 это 150px в блоке, нужно просто как то соотнести числа в пиксели и найти сколько пикселей будет marked
    – Squeli47
    23 апр 2021 в 8:22
  • @Sevastopol', решил вопрос
    – Squeli47
    23 апр 2021 в 9:45
  • @Sevastopol', да, наверное у меня неправильно, я здесь нашел решение ru.stackoverflow.com/questions/1155890/… только не знаю как все это проверить, буду пробовать разные варианты
    – Squeli47
    23 апр 2021 в 10:01
  • @Sevastopol', наверное мой неверный
    – Squeli47
    23 апр 2021 в 10:11

2 ответа 2

3

Не совсем понимаю задачу. Тем не менее, постараюсь как-то вникнуть и что-то сообразить. Всё это решение ниже - "как есть насколько я понимаю задачу"

start 20 это 0px, end 165 это 150px в блоке, нужно просто как то соотнести числа в пиксели и найти сколько пикселей будет marked

Если start 20 это 0px, а end 165 это 150px, то:

  1. Найдем разницу значений: 165-20

let start = 20;
let end = 165;

let rz = end - start
console.log('Разница значений:', rz);

  1. Узнаем высоту родительского элемента container

let h = document.querySelector('.container').scrollHeight;
console.log('Высота контейнера:', h, 'px');
.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
}
<div class="container">
  <div class="line"></div>
</div>

  1. Узнаем, сколько в одном значении пикселей px

let start = 20;
let end = 165;

let rz = end - start
console.log('Разница значений:', rz);

let zpx = 150 / rz // (h / rz)
console.log('В одном значении кол-во px:', zpx);

Теперь, зная сколько в одном значении пикселей px и зная значение marked, мы можем вывести значение для свойства top элементу .line

let line = document.querySelector('.line') // Элемент, для которого находим значение для свойства 'top:'

let start = 20; // Значение может меняться
let end = 165; // Значение может меняться
let marked = 58; // Значение может меняться

// Узнаем разницу значений
let rz = end - start
console.log('Разница значений:', rz);

// Узнаем количество пикселей в одном значении
let zpx = 150 / rz
console.log('В одном значении кол-во px:', zpx);

// Найдем значение для свойство 'top:' для элемента `.line`
let linepx = marked * zpx
console.log('Кол-во px у marked:', linepx);

// Подставим это значение
line.style.top = linepx + 'px';
.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
  position: relative;
}
.line {
  width: 100px;
  height: 1px;
  background: #333;
  position: absolute;
}
<div class="container">
  <div class="line"></div>
</div>

А теперь это всё сократим и выведем формулу:

let start = 20; // Значение может меняться
let end = 165; // Значение может меняться
let marked = 58; // Значение может меняться
let h = document.querySelector('.container').scrollHeight; // Высота контейнера

// Выведем значение для свойства 'top' по формуле
document.querySelector('.line').style.top = marked * (h / (end - start)) + 'px';
.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
  position: relative;
}
.line {
  width: 100px;
  height: 1px;
  background: #333;
  position: absolute;
}
<div class="container">
  <div class="line"></div>
</div>

2

let start = 20; // Значение может меняться
let end = 165; // Значение может меняться
let marked = 58; // Значение может меняться

let height = $('.container').height();
let bottom = height * (marked - start) / (end - start);

console.log(bottom +'px');

$('.line').css('bottom', bottom +'px');
.container {
  width: 100px;
  height: 150px;
  border: 1px solid #333;
  position: relative;
}
.line {
  width: 100px;
  height: 1px;
  background: #333;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="line"></div>
</div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.