На домашней странице Dingqiu.com я использовал плагин Carousel Bootstrap, чтобы отобразить изображения в статье. Я автоматически получаю первое изображение статьи в программе как изображение, которое будет отображаться в управлении каруселью. Поскольку размеры изображения статьи различаются, и размер подключаемого модуля карусель в основном фиксирован, изображение деформируется при отображении. Я нашел много китайских методов в Интернете, но не решил их (процесс извилистый, поэтому я не буду повторять его). Пока я не обнаружил этот плагин масштабирования jQuery - jqthumb.js. Давайте посмотрим на то, как его использовать и как использовать его для управления размером изображения в управлении каруселью, и его можно не обращать внимания и может отображать основные части изображения (аналогично эффекту смешивания изображений из моментов WeChat - я не знаю, если вы заметили, что независимо от того, какое отношение снимков разместило в Wechat Moments, он всегда может быть идеально организован без деформирования). Во -первых, давайте посмотрим на карусель карусели HTML:
<div id = "Carousel-example-generic" data-ride = "carousel"> <!-обертка для слайдов-> <div role = "listbox"> <viv> <a href = "Включенная картина одна статья"> <img src = "изображение один путь" Onload = "Drawmage (this)"/> </a> <div> <ho h4> <a style = " href = "Включенная картина Один путь статьи"> изображение одного заголовка </a> </h4> </div> </div> <div> <a href = "Включенная картина два пути статьи"> <img src = "изображение два пути" onload = "drawmage (this)"/> </a> <div> <h4> <a style = "color: white;" href = "Включенная картина два пути статьи"> Изображение два заголовка </a> </h4> </div> </div> <div> <a href = "Включенная картина Три статьи"> <img src = "Включенная картина Три пути" Onload = "DrawMage (this)"/> </a> <Div> <h4> <a style = "color: white;" href = "Включенная картина Три статья"> Изображение три названия </a> </h4> </div> </div> </div> </div> </div> </div> </div> </div>
Из приведенного выше кода мы видим, что каждое изображение (IMG) вызывает функцию DrawMage при загрузке (Onload). В этой функции мы можем вызвать метод jqthumb.js для управления размером изображения. Обратите внимание, что функция должна быть добавлена до приведенного выше HTML -кода. В противном случае, управление размером изображения выйдет из строя при загрузке в первый раз (из -за времени загрузки страницы). Код функции выглядит следующим образом:
<!-Плагин импорта-> <script type = "text/javascript" src = "/static/plugins/thumb/js/jqthumb.js"> </script> <script> функция Drawimage (hotimg) {$ (hotimg) .jqthumb ({classname: 'jqthumb', width: '100%: '50%', x: '50%'}, Zoom: '1', метод: 'Auto',});} </script>В этой функции мы называем метод JQThumb, чтобы определить миниатюру исходного изображения шириной 300px и плагином Carousel. Миниатюра генерируется из центра изображения (обратите внимание на настройку атрибута его позиции). Таким образом, даже если размер изображения изменяется, может отображаться основное содержание изображения, а отношение изображения может оставаться неизменным.
Источник: dingqiu.com
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Вышеуказанное - все содержание. Я надеюсь, что это будет полезно для всех, и я надеюсь, что все будут поддерживать Wulin.com больше.