Как сделать такой же функционал?
Чтобы подвеска удлинялась или укорачивалась в зависимости от количества символов, введенных в строку?
И как можно менять шрифты, в зависимости от выбранного дизайна?
Возможно есть готовые решения? Буду благодарен за любую информацию.
-
1Если вам дан исчерпывающий ответ, отметьте его как верный (галочка напротив выбранного ответа).– Mihanik7121 июл 2016 в 17:14
Добавить комментарий
|
1 ответ
Первым решением в голову приходит такое:
- У нас есть 3 блока абсолютно спозиционированных. Блок с текстом и 2 блока цепочки.
- Первый блок выравниваем в центру блока при изменения текста вычисляя ширину блока с текстом и родительского блока.
- В ручную задаём верхние точки цепочки.
- Определяем верхние точки текста.
- Делаем блок с началом в верхней точке цепочки и длинной равной расстоянию между верхними точками цепочки и верхними точками текста. И поворачиваем блок css свойством rotate на угол, который вычисляем так же по 2 точкам(верхними точками цепочки и верхними точками текста).
- На фон у созданных блоков кладём повторяющееся изображение цепочки
Требуется поддержка rotate.
Если есть вопросы готов подробнее расписать.
- Текстовый блок должен иметь width:auto;position:absolute;top:200px(к примеру). Через JS определяем ширину блока и ширину рабочей области. Тогда left блока с текстом будет
(ширина области - ширина блок)/2
. Тем самым мы находим координаты точки B (top:200;left:только что выяснили). - Координаты точки A у нас должны быть жёстко заданы в JS.
- Как получить координаты точек B и D описал во 2 пункте
- Получаем координаты точки A1 из координат точек A и B — думаю по рисунку будет понятно. Получили треугольник по нему мы можем узнать длинну стороны AB — это будет ширина нашего нового блока. Начало блока будет в точке A. Ну и по треугольнику AA1B мы сможем найти угол на который нужно повернуть.
Вторую сторону цепочки делаем примерно так же
-
Круто! 1. <div id="main" style="position: relative;"> <div calss="text" style="position: absolute;"></div> <div calss="podves1" style="position: absolute;"></div> <div calss="podves2" style="position: absolute;"></div> </div> 2. А как сделать при изменении текста вычислять ширину блока с текстом и родительского блока? 3. Это скорее всего top, left нужно указать? 4. Тут также top, left? 5. Вот это не совсем понял. 6. С фоном круто придумано)– alikitto21 июл 2016 в 9:11
-
-
1
-