Галерея
Адаптивная галерея least.js
Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на десктопе, так и на мобильных устройствах. В галерее используется плагин lazyload — отложенная загрузка картинок, который позволяет экономить трафик. При наведении курсора на изображение отображается краткое описание, а по клику происходит показ полной версии изображения. По умолчанию изображения формируются случайным образом на странице.
Фотогалерея на jQuery
Минималистичная фотогалерея на jQuery. Её можно использовать для показа своих работ или в качестве фотоальбома. А с помощью меню, можно сортировать фото/работы по категориям. Галерея кроссбраузерная, что позволит без труда адаптировать её под ваш сайт.
Эффект фокусировки на изображении
Эффект фокусировки на изображении. При наведении на фотографию, остальные снимки затемняются. Реализован данный эффект ввиде не совсем обычного слайдера.
CSS3 фотогалерея
В этом уроке сделаем фотогалерею используя только CSS3. Вот с такими свойствами будем работать: user-select, box-sizing, transition, box-shadow и transform.
Диагональное вращение изображений
Превратим неупорядоченный список во вращающееся диагональное портфолио из изображений с помощью CSS3 и jQuery.
gpGallery — галерея
Очень простая галерея использующая jQuery. При наведении на миниатюру изображение увеличивается до исходного размера.
Круглая галерея
Простая галерея с раположением изображений по кругу реализованная с помощью jQuery плагина radmenu.
Галерея рубашек
Интересный и простой эффект, который можно использовать на сайте интернет магазина. Полноразмерные изображения помещаются в контейнер DIV меньшего размера. Изображение центрируется, но не показывается полностью, так как параметр overflow:hidden — в состоянии включен.
3D галерея
Галерея изображений с эффектом 3D. При движении курсора миниатюры фотографий (которые имеют тень), также двигаются. Позволил от себя добавить иконку «Лупа» — увеличения фотографии, за место текста.
Прикольная фотогалерея
Прозрачная, фиксированная, оформленная с использованием CSS фотогалерея и вызываемая нажатием на кнопку Включения/Выключения.
Анимированная фотогалерея на jQuery
Для оживления галереи используется функция animate() и при наведении на картинку происходит плавное изменение цвета от черно-белого до цветного.
Предпросмотр миниатюр слайдами
В этом уроке я покажу, как можно сделать предпросмотр миниатюр слайдами на jQuery.
Популярные статьи
Реклама
Опрос
Табы или пробелы?
Табы
Пробелы
Что?!
Новости
Подпишись
Присоединяйся, чтобы узнать все самое интересное для frontend разработчика и анонсы статей с сайта.
Разное
Реклама
Свежие статьи
Меню и навигация
Эффект наведения следящий за курсором
Подчеркивание ссылки при наведении на пункт меню
Canvi — off-canvas панель навигации
Canvi навигационная панель (off-canvas) с несколькими параметрами для настройки. Можно использовать сразу несколько панелей на одной странице, устанавливать адаптивную ширину и использовать свои стили для панели.
Эффект зачеркивания при наведении в меню
Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.
Slinky — адаптивное многоуровневое меню
Легкий адаптивный плагин многоуровневого меню. Меню больше подходит для отображений на мобильных устройствах.
Гибкое горизонтальное меню
Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню.
Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
Slide out sidebar меню
Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.
Mega dropdown меню
Mega dropdown меню — jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.
Диагональное меню на CSS
Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.
Lavalamp меню на CSS3
Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект.
Анимированный border с меню
Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.
Адаптивное много-уровневое меню
Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css
Плагин адаптивной навигации без зависимостей от каких-либо библиотек и с быстрой поддержкой touch устройств.
Популярные статьи
Реклама
Опрос
Используете ли вы в реальных проектах CSS Grid Layout ?
Нет, из-за необходимости поддерживать старые браузеры
Нет, хватает flexbox
Нет, хватает display-table и float
Что это вообще за css grid?
Новости
Подпишись
Присоединяйся, чтобы узнать все самое интересное для frontend разработчика и анонсы статей с сайта.
Разное
Реклама
Свежие статьи
JavaScript Kit Бесплатный JavaScript!
Основной > Категории сценариев
| Часы, календари и таймеры JavaScript Подкатегории: Календари | Обратный отсчет | Спецэффекты с фоном и документом | |
| Скроллеры | Изображения и музыкальные эффекты | |
| Комбинированные поля | Изображение слайд-шоу и галереи | |
| Меню и перенаправление | Ссылки | |
Окна, пульты, рамки и т. д. | Защита паролем | |
| Использование файлов cookie для хранения информации о пользователях. | Пользовательская система (тип браузера, экран
размер, дата изменения, IP и т.д.) | |
| Математика | Форма и проверка формы | |
| Поисковые системы JavaScript | Электронная почта и проверка | |
| Текстовые эффекты | Случайные вещи | |
| Эффекты строки состояния | ||
| JavaScript Игры | Сообщения | |
| прочие | Ajax-скрипты | |
| Скрипты управления контентом |
.
| Динамический Диск — окончательный DHTML сайт, посетите Dynamic Drive, чтобы увидеть сотни бесплатных оригинальных DHTML-файлов. скрипты, такие как DHTML меню и многое другое! |
| . | |
| Последний JavaScripts — Последнее обновление 19 мая 2017 г. | Отправить скрипт |
- Страница 1
- Страница 2
- Страница 3
- Страница 4
Нижний регистр, название и
Инструмент преобразования регистра предложений
Это простой онлайн-инструмент JavaScript для простого преобразования строки в
нижний регистр, верхний регистр, заголовок, заглавная буква или регистр предложения, в зависимости от
твои нужды.
JK Responsive Gallery v2.0
JK Responsive Gallery — это современная,
Галерея видео и изображений Youtube в стиле лайтбокса, которая отлично работает на любом размере экрана и устройстве,
большой или маленький. Нажмите на миниатюру изображения/видео, чтобы увидеть увеличенную версию
по центру экрана с поддержкой дополнительной расширенной подписи HTML
под этим.
Меню боковой панели вне холста
Меню боковой панели вне холста создает
меню, вытесняющее контент, объявлено как в мобильных приложениях, так и на сайтах. Когда пользователь
щелкает значок меню, содержимое страницы смещается вправо, открывая боковую панель
меню. Это мобильное меню работает во всех современных браузерах и платформах; в IE8
и IE9 представлен более ограниченный интерфейс.
Слайд-шоу 3D Cube
Это слайд-шоу изображений поворачивает изображения в глазах
3D мода, никаких специальных очков не требуется! Он использует CSS3 для
эффект и работает в IE10+ и всех современных версиях Firefox и
Chrome, в том числе на мобильных устройствах, хорошо деградирует с более низкими версиями
IE.
Изображения в слайд-шоу могут быть связаны гиперссылками, а слайд-шоу
можно перемещаться с помощью свайпа или кнопок назад/вперед.
Простой
Карусель
Простая карусель позволяет отображать
длинная серия изображений и подписей в виде горизонтальной полосы, которую можно перетаскивать
влево или вправо, чтобы выявить скрытые. Он вдохновлен каруселью, которая
Google использует в своих результатах поиска, когда вы ищете, скажем, «действие
фильмы», чтобы продемонстрировать обложки и названия фильмов. Содержимое карусели
загружаются из внешнего файла на сервер через Ajax и могут быть перезагружены
с другим файлом в любое время.
Размытие
Эффект изображения
Этот скрипт Blur Image позволяет
легко размыть изображение, изменяя интенсивность, мгновенно или постепенно. Это
использует превосходную библиотеку StackBoxBlur для усиления эффекта и работает во всех
основные браузеры, поддерживающие элемент canvas HTML5.
А масон
Меню боковой панели
Это меню моделирует себя после
боковое меню, найденное на
Amazon.
com, чтобы предоставить гибкое, богатое содержанием раскладное меню. Он поддерживает
бесконечное количество подменю. Кроме того, меню отзывчиво в
экран меньшего размера и мобильные устройства, складывая подуровни, когда
открывается поверх своего родителя для экономии места.
Ротатор падающего текста
Этот скрипт jQuery добавляет поворот к обычному ротатору текста, случайным образом
удаление букв каждого фрагмента контента из поля зрения перед показом
следующий. Он отлично работает с короткими заголовками.
Анимированные списки UL
Этот сценарий jQuery добавляет
ваши списки UL, анимируя элементы в поле зрения, по одному элементу за раз. Вы можете получить
каждый элемент, чтобы скользить слева, опускаться или даже вращаться, прежде чем сделать их
путь к месту назначения. Он использует мощь переходов CSS3, чтобы выполнять свои функции.
торгов, анимируя любые определенные свойства CSS до и после значений.
Ползунок миниатюр
Ползунок миниатюр позволяет указать список изображений для демонстрации.
автоматически создает двухколоночный интерфейс с эскизами
изображения справа и увеличенное изображение слева для просмотра на
требовать. Наведите указатель мыши на миниатюру, чтобы просмотреть увеличенную версию.
HTML5 наведение мыши/звук щелчка
эффект
Этот скрипт использует новый звук HTML5
элемент, позволяющий легко добавлять звуковые эффекты к любому действию на странице, например
например, когда пользователь щелкает ссылку или перемещается по ней. Скрипт работает во всех браузерах
которые поддерживают HTML5, которые в настоящее время являются IE9+, FF3.5+, Chrome/Safari 3+,
и Opera 10.5+
Скрипт наложения содержимого DIV
Этот скрипт идеально перекрывает любой DIV на вашей странице с помощью поля наложения
когда мышь наводит на прежнего, то скрывает поле onmouseout. Этот
скользящее поле может использоваться для отображения чего угодно, от текста до изображений/и богатого
содержимое и установите слайд с любых четырех сторон основного DIV
под этим.
Спасательный текст
и скрипт значений поля TEXTAREA
Одна из худших вещей, которые могут
происходит, когда пользователь вводит данные в тип ввода="текст" или ТЕКСТОБЛАСТЬ элемент является случайной перезагрузкой браузера или даже сбоем — все данные
мгновенно теряется. Этот сценарий использует sessionStorage HTML5 для хранения
текст, введенный в эти поля по мере того, как пользователь печатает, и вызывает их в
событие обновления страницы или даже сбой браузера (только FF3.5+).
Полноэкранное слайд-шоу изображений
(с автоматическим чтением изображений из каталога)
Слайд-шоу полноэкранных изображений
классное слайд-шоу, использующее jQuery и PHP для отображения больших изображений из
автоматически и используя все окно браузера в качестве холста!
Миниатюры каждого изображения отображаются в нижней части слайд-шоу для
легкий просмотр по запросу.
Большой размер
Image Viewer
Программа просмотра изображений больших размеров автоматически добавляет
изображения, которые при нажатии запускают версию изображения «плюс размер».
Увеличенное изображение может отличаться от оригинала, поэтому
бывшая загружается только по требованию при запросе.
jQuery MaxLength для ВВОДА
и поля TEXTAREA
Этот полезный скрипт проверки формы
позволяет добавить пользовательский атрибут «maxlength» к Тип ввода="текст" и элементов TEXTAREA , чтобы пользователи не могли вводить больше
символов в эти поля, чем назначенный номер. Он может
необязательно отображать количество символов, оставшихся для поля, когда пользователь вводит
отображая эту информацию разными цветами в зависимости от того, насколько близко пользователь
находится на пределе.
j Мегаменю запроса
Мегаменю относятся к выпадающим меню, которые содержат несколько столбцов
ссылки. Этот скрипт jQuery позволяет добавить мегаменю к любой якорной ссылке на
на вашей странице, где каждое меню раскрывается с помощью плавной расширяющейся анимации.
Сценарий прокрутки изображения
Это небольшой, компактный
JavaScript, который позволяет легко назначать эффект ролловера любому изображению на
страница.
Сценарий предварительно загружает оба задействованных изображения для плавного перехода.
jScale Image Scaler
jScale — это практичный плагин jQuery, который позволяет легко масштабировать изображение.
на странице пропорционально ее исходным размерам во многих отношениях.
Просто установите новую желаемую длину любой из двух сторон изображения и
пусть сценарий масштабирует другую сторону соответствующим образом. Поддерживает анимацию и
функция обратного вызова.
Случайный выбор
Слайд-шоу переходов
Это изображение плюс текст
слайд-шоу с описанием, которое показывает каждое изображение, используя 1 из 17 случайных изображений
выбранный
Эффекты перехода в браузерах IE. Для других браузеров, которые не поддерживают эти
встроенные эффекты, вместо них используется настраиваемый переход затухания. Каждое изображение
может быть опционально гиперссылка с текстовым описанием под ним, и
слайд-шоу приостанавливается, когда пользователь наводит на него указатель мыши.
скрипт apTabs
apTabs — это ненавязчивое решение для вкладок HTML/JavaScript, использующее прототип
рамки. Обычные теги заголовков h3 используются для отображения
сами вкладки и DIV для содержимого вкладки. Роман
особенностью является возможность горизонтальной прокрутки вкладок для отображения лотов
вкладок в ограниченном пространстве.
Богатый HTML
Ticker
Rich HTML TIcker — это практичный скрипт для отображения обычных,
богатый HTML-контент в повернутом виде на вашей странице. Содержимое тикера
может быть определен либо на странице, либо во внешнем файле и
получено с помощью Ajax.
Анимированное контурное меню
Это стильное выпадающее меню.
который может быть связан с любой «якорной» ссылкой на странице. Когда он падает
вниз или сжимается анимированный эффект «контура» применяется для
хорошая мера. Меню можно настроить так, чтобы оно появлялось с помощью « клик ».
или « mouseover » якорной ссылки.
Встроенная подсказка HTML
Подсказка встроенного HTML позволяет
определить расширенные всплывающие подсказки HTML, которые встроены непосредственно в вашу веб-страницу и которые
появляются при наведении курсора мыши на ссылки на вашей странице. Появится всплывающая подсказка
непосредственно под якорной ссылкой и динамически регулирует свое положение в зависимости от
находится ли мышь слишком близко к краям окна.
Document Text Resizer
Этот сценарий добавляет пользователям возможность переключать
размер шрифта, с постоянными файлами cookie , которые затем используются для запоминания настроек. Скрипт работает
ненавязчиво и с любой веб-страницей, добавив на страницу один из нескольких CSS
классы, которые изменяют размер шрифта страницы в зависимости от настройки
нажал.
Сценарий Drop Down Panel
Drop Down Panel добавляет выпадающее меню
панель вверху вашей страницы, которая содержит внешний контент, полученный через Ajax.
Посетители нажимают на выступающую кнопку, чтобы панель опустилась.
и раскрыть его содержание. Повторный щелчок в любом месте панели закрывает ее.
Overlap Image Viewer
Overlap Image Viewer позволяет
быстро связать изображение с любым элементом на вашей странице, чтобы при наведении мыши
перекатывается по нему, желаемое изображение показывается поверх него. Приятное «затемнение».
Эффект применяется к элементу, пока отображается загруженное изображение.
Подсказка Ajax
скрипт
Этот Ajax
скрипт улучшает стандартное « title »
атрибут HTML, поэтому некоторые всплывающие подсказки могут вместо этого получать свое содержимое
из внешнего файла, с богатым HTML-контентом и всем остальным. Интеграция
легко и ненавязчиво.
Тускнеть
В Content Viewer
Этот скрипт превращает обычный HTML-контент в
обернутые вокруг тегов DIV в серию интерактивного содержимого, с одним
исчез в поле зрения по требованию! Вы можете использовать его, чтобы выделить новые или важные
содержание на вашем сайте.
А так как каждый контент представляет собой обычный HTML на
страницу, настройка всего этого безболезненна.
Аякс Пейдж
Fetcher
Этот сценарий Ajax позволяет вам получить содержимое другой страницы (как
должен быть с того же сайта) и отображать его по запросу в
текущая страница. Вы можете дополнительно указать любые внешние файлы .js или .css.
который должен загружаться одновременно с внешней страницей.
BackBox Image Viewer
BackBox — это
новый скрипт галереи изображений, который отображает ваши изображения плавным и простым способом.
Он работает по тому же принципу, что и «Lightbox.js», но поддерживает возможность
чтобы закрыть увеличенное изображение, когда пользователь нажимает кнопку браузера «назад»,
вместо действия по умолчанию перехода на предыдущую страницу. Интерфейс также добавляет
явные «предыдущие» и «следующие» ссылки, а также режим автоматического поворота.
Ограничение
количество отмеченных флажков скрипт
Этот короткий
но практичный сценарий позволяет вам ограничить количество флажков в группе, которая
можно проверить.
Например, у вас может быть список из 5 флажков, но вы хотите
разрешить пользователю только возможность проверить максимум 2 в любое время. Использовать это
скрипт для этого.
Flip Menu
Flip Menu создает складной
дерево меню из обычного HTML-списка! состоит только из одного внешнего
.js, в котором вы указываете такие параметры, как сохранение
состояние меню (с использованием файлов cookie), изображения, используемые для замены по умолчанию
список маркеров, и если какие-либо ранее открытые ветки должны быть закрыты, когда
текущий открыт.
Форма
Подсказки к полям
Предоставляйте полезные подсказки рядом с определенными полями формы, чтобы помочь вашим пользователям
как заполнить их с помощью этого элегантного скрипта. Подсказка появляется только тогда, когда
поле вопроса имеет фокус пользователя.
Изображение Divviewer
Средство просмотра
Средство просмотра разделов
Средство просмотра изображений позволяет отображать встроенные изображения — когда пользователь нажимает на ссылку — 90 160 масштабируется до 90 161, чтобы соответствовать размерам страницы, если это необходимо.
это очень удобно
для очень больших изображений, которые могут создавать эти неприглядные полосы прокрутки браузера
если не масштабировать.
Пагинация
Combo Box
Вдохновленный аналогичным механизмом, найденным в некоторых статьях на PCWorld.com,
используйте этот сценарий поля со списком в качестве интерфейса разбиения на страницы в серии
связанные страницы, такие как длинная статья. содержание.
Случайный контент
Легко
отображать случайный фрагмент контента, выбранный из множества на странице, для ваших посетителей
с помощью этого скрипта! Просто оберните участвующее содержимое внутри DIV с помощью
специальное имя класса CSS, и все! Поддерживает несколько «групп» случайных
Случайный порядок
content
Этот скрипт
позволяет менять порядок отображения обычного контента на странице. Просто оберните участвующее содержимое внутри DIV с помощью
специальное имя класса CSS, и сценарий будет изменять порядок, в котором эти
содержимое отображается на странице сверху вниз! Поддерживает несколько
«группы» содержимого произвольного порядка.
Анимированный
комбинация случайных опций
Это уникальный скрипт комбинированного меню
который поддерживает возможность случайного выбора из списка вариантов
доступные для посещения. Это комбинированное меню с духом приключений!
Вы можете свободно использовать любые скрипты из нашей библиотеки как на личных, так и на коммерческих веб-страницах.
Однако вы НЕ МОЖЕТЕ распространять наши сценарии, например, размещая их в другом архиве сценариев или на компакт-диске.
Хотите отправить оригинальный сценарий для включения в наш архив? Кликните сюда.
Коды JavaScript для вашей веб-страницы
| |||||
| |||||
| |||||||||
Используется для создания спец.
эффекты на веб-странице.