Показ скрытого контента на сайте в jQuery
 | |
| При заполнении на сайте, нам нужно написать много знаков, где автоматически все заполняется, и мы уже не видим, что дальше пишем в блоке сайта. И здесь смотря один эффект на одном зарубежном сайте мне попался оригинальный вариант, как можно автоматически выводить все буквы и знаки, в тот момент, когда мы прекращаем их наблюдать. Возможно у кого пароль длинный по знакам, что он его пишет, и далее уже на автомате, и иногда получается, что где-то не правильно значение проскочило. Теперь при установке решение вы всегда будете в курсе, что вы пишите, так как все ниже станет дублировать, то все визуально не просматриваются. Как веб-разработчики должны создавать сайты таким образом, чтобы они соответствовали разной длине текста. Вы должны быть уверены, что ваша разметка выглядит так же хорошо с 50-символьным именем пользователя, как и с 5-символьным. В прошлом это было возможно только путем разрезания текста на стороне сервера или с помощью JavaScript, но сегодня мы можем сделать это только с помощью CSS благодаря таким свойствам, как max-width и text-overflow. В этом коротком уроке узнаете про простую технику, которая плавно переходит в фоновый текст. Установив значение max-width, где можем добиться эффекта, который вы можете увидеть в демонстрационной версии. Вот что нам поможет каждый из них: 1. Элемент будет свободно увеличивать свою ширину, пока не достигнет значения, установленного max-width. 2. В этот момент весь лишний текст будет скрыт благодаря overflow:hidden свойству. 3. Чтобы предотвратить разрыв текста на новую строку, мы используем white-space:nowrap. 4. Чтобы создать плавный переход между текстом и цветом фона элемента, мы будем использовать псевдоэлемент:after. Этот элемент будет иметь linear-gradient прозрачный цвет фона, где расположится справа от контейнера и станет видимым только при расширении элемента. По умолчанию в установке так получится, так, что свои коррективы под стиль дизайна ставить.  Подключаем библиотеку Код <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> HTML Чтобы подготовить почву, мы должны сначала написать несколько строк HTML: Код <input type="text" value="Этот текст будет расширяться" /> <h2><span id="elem" class="perepolneniye-300"></span> и это сместится в сторону.</h2> Ввод текста необходим только для того, чтобы дать посетителю возможность легко изменять контент, в противном случае им придется использовать инструменты разработчика своего браузера. Элементом, к которому применяется метод переполнения, является диапазон #elem . Здесь идет класс с именем perepolneniye-300, который мы будем использовать для реализации техники в нашем CSS. CSS Код h2 { text-align: center; color: #555d6e; font-weight: normal; } .perepolneniye-300{ overflow:hidden; max-width:315px; position:relative; white-space: nowrap; } .perepolneniye-300:after{ content:''; position: absolute; left:315px; margin-left: -38px; width: 38px; height:100%; top:0; background:linear-gradient(to right, rgba(242, 242, 243, 0), rgba(242, 242, 243, 1)); } input[type=text] { display: block; margin: 40px auto; width: 315px; height: 30px; font: inherit; line-height: 1; text-align: left; padding: 4px 20px; border-radius: 3px; border: 1px solid #bbb9b9; box-shadow: 0 1px 1px #c7c2c2; } Следует помнить, что мы не можем установить элемент width или элемент max-width, для которого установлено значение display:inline, где отображение элементов span по умолчанию. JS Код $(function(){ var elem = $('#elem'), textbox = $('input[type=text]'); textbox.on('input', function(){ elem.text(textbox.val()); }); textbox.trigger('input'); }); Если вы хотите изменить максимальную ширину элемента, вам также необходимо изменить левое значение:after элемента. Также здесь есть несколько jQuery, которые будут прослушивать событие ввода текста в текстовом поле и обновлять содержимое span: Этот метод выглядит по функциям отлично, так как text-overflow:ellipsis на самом деле отображается больше текста, и он прекрасно сочетается с дизайном страницы. Однако за счет этого требуется больше строк CSS, и вам необходимо вручную установить максимальную ширину. В некоторых случаях дополнительные усилия того стоят, когда целью является более чистый дизайн. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
