На сайт jquery: jquery » Скрипты для сайтов

Содержание

jquery » Скрипты для сайтов

35 535
Скрипты / Other

Новогодняя мотня от Яндекса 2.1

Елочные шарики, которые двигаются при наведении на них мышкой, а ещё издают звук. Новая версия 2.1! Специально от pcvector.net. Удален flash. Переписан jаvascript. Всех с наступающим Новым годом!

5 868
Скрипты / Tabs

Tabulous — плагин вкладок, табов

Tabulous — представляет собой плагин для реализации у себя на сайте блока с вкладками с различными эффектами переключения самих вкладок.

6 983
Скрипты / Zoom

ZooMove — масштабирование изображений

jQuery плагин, который позволяет динамически менять масштаб изображения при наведении курсора мыши. Перемещая курсор, можно также зуммировать различные участки изображения.

12 672
Скрипты / Slider

PgwSlider — адаптивный слайдер

Адаптивный слайдер с небольшим весом минифицированных файлов. Заявлена поддержка всех десктопных и мобильных браузеров. SEO совместимый.

12 881
Скрипты / Slider

Слайдер с parallax эффектом

Полноэкранный слайдер с возможностью перетаскивания слайдов (drag) и parallax эффектом.

9 881
Скрипты / Layout

Блоки одинаковой высоты — jquery.matchHeight

  matchHeight позволяет все выбранные элементы сделать одинаковой высоты.

7 407
Скрипты / Scroll

Scrollify — ускоритель прокрутки колёсика мыши

Scrollify — ускоритель прокрутки колёсика мыши. jQuery плагин, который помогает быстро и плавно переместиться к нужному разделу или секции страницы. Настраиваемый и оптимизированный для touch устройств.

20 073
Скрипты / Slider

UniteGallery — многофункциональная адаптивная галерея

Unite Gallery — многофункциональная галерея для вывода изображений, музыки, видео. Галерея адаптивная с поддержкой touch устройств.

13 845
Скрипты / Accordion

Вертикальное accordion меню

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.  

5 164
Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

5 519
Скрипты / Tabs

Адаптивные вкладки на jQuery

Несколько строк кода на jQuery + один CSS файл и отличные адаптивные вкладки готовы. Внешний вид полностью настраивается стилями. При уменьшении размера окна браузера до заданного в @media{} вкладки из горизонтальных преобразуются в вертикальный аккордион.

6 845
Скрипты / Form

Selectric — пользовательский select

Быстрый, простой и легкий jquery плагин позволяющий оформить html тег select в том стиле, который пришел на ум вашему дизайнеру.

jQuery

jQuery — это одна из самых популярных библиотек JavaScript. И это неудивительно для тех, кто её использует. Она позволяет упростить, ускорить и, что самое удивительное, улучшить разработку скриптов на JavaScript.

Преимущества jQuery:

  • Очень удобная работа с элементами, основанная на селекторах CSS.

  • Отличная кроссбраузерность. Многие программисты не задумываются над кроссбраузерностью, однако, это необходимо, ведь один и тот же код разные браузеры могут обрабатывать по-разному. jQuery все эти нюансы учитывает, и Вам уже не надо об этом задумываться.

  • Отличные возможности по анимации. Анимация украшает страницу и делает её более приятной для использования. Проще сделать анимацию, чем это реализовано в jQuery, просто невозможно: огромные возможности при простоте использования.

  • Большое количество готовых плагинов. Чтобы сделать тот же слайдер изображений на JavaScript, может потребоваться несколько дней. А установить и настроить готовый плагин можно за несколько минут.

Исходя из этого, jQuery должен знать каждый, кто занимается разработкой сценариев на JavaScript. И цель данной категории научить Вас использовать jQuery, а также показать примеры использования, например, из моей же практики.

Прочитав статьи по jQuery, Вы узнаете:

1) Как установить jQuery.

2) Что такое функция $() в jQuery.

3) Как сделать выборку элементов в jQuery.

4) Как работать с выборкой на jQuery.

5) Как добавлять и удалять элементы в jQuery.

6) Как обработать события на jQuery.

7) Как делается анимация на jQuery.

8) Как сделать зумирование изображений на jQuery.

9) Как сделать плавную кнопку «наверх» на jQuery.

10) Как сделать динамическую загрузку файлов на сервер.

11) Как делается адаптивная вёрстка на jQuery.

12) Как отправлять асинхронные запросы на JQuery

13) Как отправлять Ajax запросы с помощью методов $.post() и $.get()

14) Как сделать радио кнопки в виде слайдера на JQuery.

15) Как установить слайдер slick.

16) Как сделать архив с помощью плагина для JQuery.

17) Как сделать экскурсию по сайту на JQuery.

18) Как сделать красивые табы на JQuery.

19) Как создать титры на сайте с помощью плагина для JQuery.

20) Как создать красивый progressbar с помощью плагина для JQuery.

21) Как сделать замок по шаблону на JQuery.

22) Как добавить динамики на сайт с JQuery библиотекой dynamo.js.

23) Как сделать видео на заднем фоне с помощью JQuery.

24) Как сделать подтверждение отправки почты на JQuery.

25) Как сделать красивый и эффектный слайдер на JQuery.

26) Как сделать красивый выпадающий список на JQuery.

27) Как сделать красивое всплывающее окошко на JQuery, используя WebUI-Popover.

28) Как сделать красивые уведомления на JQuery, используя плагин Noty.

29) Как сделать красивое выпадающее меню с интересным эффектом на CSS и JQuery.

30) Как сделать задний фон в виде частиц на JQuery.

31) Как сделать интерактивное сравнение двух фотографий на JQuery.

32) Как сделать круговой ползунок на JQuery.

33) Как сделать облака на JQuery.

34) Как вывести время, прошедшее с момента опубликования записи, на JQuery.

35) Как вывести специальные символы на JQuery.

36) Как сделать счетчик обратного отсчета на JQuery.

37) Как сделать кастомное меню на JQuery.

38) Как сделать анимацию при загрузке страницы на JQuery.

39) Как определить блокировщик рекламы на JQuery.

40) Как сделать выезжающее меню на JQuery.

41) JQuery LightGallery — плагин для создания галерей.

42) Как обернуть элемент в макет браузера или устройства на JQuery.

43) Как сделать красивую галерею с сортировкой на JQuery.

44) Как сделать интерактивный 3D объект на JQuery.

45) Как сделать всплывающее окно на JQuery.

46) Как сделать скроллинг параллакс эффект.

47) Как сделать гамбургер меню на CSS и JS. Часть 1.

48) Как сделать гамбургер меню на CSS и JS. Часть 2.

49) Как сделать выдвигающийся поиск по клику.

50) Как сделать валидацию формы на jQuery.

51) Как сделать маску ввода телефона на jQuery.

52) Как работать с библиотекой jQuery.

53) Как работать с библиотеке jQuery UI.

54) Как использовать jQuery UI Slider.

55) Как применить виджет jQuery UI Datapicker.

56) О плагине для табов EasyTabs.

57) Как настроить слайдер BxSlider.

58) Как поставить таймер обратного отсчёта на сайт.

59) Как сделать AJAX-форму без перезагрузки страницы.

60) Как создать эффект печатающегося текста на сайте.

61) На реальном примере про анимацию SVG вектора.

62) Фильтры в jQuery.

63) Как получить селектор в jQuery.

64) Как манипулировать атрибутами в jQuery.

65) Как работают jQuery события мыши.

66) Как работают jQuery эффекты.

67) Как сделать всплывающее окно popup на jQuery (часть 1).

68) Как сделать всплывающее окно popup на jQuery (часть 2).

69) Как сделать фильтрацию по первым буквам на jQuery.

70) Как сделать анимацию кнопки меню гамбургер.

71) Как сделать адаптивное меню гамбургер.

72) Как делать Mobile first верстку.

73) Как делать плавный якорь на jQuery.

74) Как сделать прокрутку страницы вверх.

75) Как сделать виджет аккордеон библиотеки JQuery UI.

76) Кому нужен jQuery и почему?.

77) Получить значение из формы на jQuery

78) Получить и изменить значение атрибута на jQuery.

79) Data атрибуты на jQuery (часть 2).

80)Пример стилизации Slick слайдера (часть 1).

81)Пример стилизации Slick слайдера (часть 2).

82)Настройки стрелок у Slick слайдера (часть 3).

83)Настройка галереи Fancybox 3.

84)Выгрузка товаров на сайт (jQuery + JSON).

Все материалы по jQuery

10+ крутейших JQuery плагинов для Вашего сайта бесплатно

Друзья, сегодня я предлагаю Вам скачать несколько самых красивых и бесплатных JQuery плагинов, которые только можно найти на просторах интернета. В данную подбору войдут: меню, слайдеры и ещё несколько очень красивых и полезных плагинов. Я думаю, что данная подборка точно Вам понравится. приятного Вам скачивания! 🙂

Так же рекомендую к просмотру и прошлые подборки:

Эластические элементы для сайта

Тут Вы сможете скачать несколько красивых и эластичных элементов для сайта с красивыми анимированными эффектами. Сюда входят навигация и кнопки, а так же ещё несколько элементов

Демо Ι Скачать

Классные и простые модальные окна на CSS и JQuery

Совершенно новые и современные модальные окна с множеством разнообразных примеров.

Демо Ι Скачать

Перспективные слайдеры для больших изображений

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

Демо Ι Скачать

Перетаскивания элементов на странице с помощью JQuery

Красивое и анимированное перетаскивание разнообразных элементов прям на странице сайта.

Демо Ι Скачать

Отлично реализованный поиск для сайта

Очень красивый и полноэкранный поиск для сайта с разнообразными подсказками.

Демо Ι Скачать

Обрезание изображений на HTML5 Canvas

С помощью этого JQuery плагина Вы с лёгкостью сможете реализовать на своём сайте моментальную обрезку изображений.

Демо Ι Скачать

Куча разнообразных эффектов для изображений при наведении

Замечательные и современные эффекты для изображений на Вашем сайте. Данные анимированные эффекты срабатывают при наведении на картинки.

Демо Ι Скачать

Эластичный эффект слайдера на JQuery

Интересный и красивый эластичный эффект, который срабатывает при перелистывании страницы слайдера. Смотрится очень современно и красиво.

Демо Ι Скачать

Крутые всплывающие подсказки

Очень красивые и новые всплывающие подсказки для разнообразных элементов на сайте. Так же есть несколько разнообразных примеров, которые Вы можете тоже использовать.

Демо Ι Скачать

Несколько анимационных фонов для сайта

Крутые и анимационные фоны, которые Вы можете использовать на фоне Вашего сайта, так же присутствует несколько разнообразных примеров.

Демо Ι Скачать

Эффекты меню

Тут Вы можете скачать несколько меню для сайта, которое имеет красивые эффекты при его открывания пользователем.

Демо Ι Скачать

Полезные плагины для сайта на jQuery

Галереи, параллакс, меню и всплывающие уведомления — обзор проверенных jQuery-плагинов.

В статье про jQuery мы сказали: плюс jQuery в том, что для этой библиотеки есть плагины на любой случай. Настало время это доказать — дарим вам подборку классных и проверенных плагинов на все случаи жизни.

1. Slideout.js

slideout.js.org

Этот плагин упрощает разработку мобильных веб-приложений и добавляет поддержку свайпа влево для доступа к меню. На сайтах тоже можно использовать, если хотите сделать мобильную версию максимально похожей на программу.

Отдельное спасибо разработчикам за то, что этот плагин весит всего 2 килобайта и не требует никаких дополнительных надстроек.

2. PhotoSwipe

photoswipe.com

Нужна красивая галерея на сайт? Ставьте PhotoSwipe — проверенную галерею с анимацией, множеством настроек и активным сообществом. Подойдёт, если вам нужно просто красиво разместить фото на сайте, чтобы их можно было листать, разворачивать на весь экран и начинать просмотр с любой картинки.

3. Toastr

codeseven.github.io/toastr/

Плагин для уведомлений на все случаи жизни. Настраивать можно всё — от текста сообщения до анимации появления и длительности показа. Можно на своём сайте делать вид, что кто-то только что заказал ваш продукт из Будапешта, а кто-то другой только что просматривал эту страницу и тоже хотел купить. Всех такие всплывашки бесят, но они работают.

4. SweetAlert

sweetalert.js.org

Меняет стандартные браузерные уведомления на стильные и заметные сообщения. Теперь пропустить их будет сложнее, а пользователь сразу поймёт, что он него что-то хотят. Чтобы понять, как это работает, сравните два уведомления: стандартное и SweetAlert:

Стандартное SweetAlert

5. jQuery-Tabledit

markcell.github.io/jquery-tabledit

Плагин для тех, кто работает с базами данных. Например, если вы делаете админку для корпоративного сайта или веб-интерфейс для таблиц, то плагин поможет вам работать с полями таблицы как с обычными полями ввода. Можно разрешить только просмотр, изменение, удаление или всё вместе. Программисту остаётся настроить плагин так, чтобы все изменения попадали обратно в базу.

6. Skrollr

prinzhorn.github.io/skrollr

Лёгкий способ сделать эффект параллакса на странице — использовать Skrollr. Параллакс в общем случае — это когда что-то движется на переднем фоне быстрее, чем на заднем или на остальных. Эдакое псевдо-3D, только при скролле. Параллакс любят использовать производители смартфонов на заставках, а с этим плагином можно сделать в таком стиле целый сайт.

7. IntroJS

introjs.com

Удобная штука для создания обучающих сайтов или пошаговых руководств. Она поэтапно покажет все элементы на странице и объяснит, что они означают. Если нужно сделать онлайн-презентацию для заказчика и нет времени объяснять — берите IntroJS.

8. ScrollMagic

scrollmagic.io

Хитрый плагин с огромными возможностями настроек. Он закрепляет какой-то элемент страницы в определённом месте и включает анимацию в нужный момент. Нужный момент выбираете вы сами, и их может быть несколько на одной странице. Посмотрите пример, и вам станет понятно, насколько крут этот плагин.

9. FloatLabel.js

labs.mikemitchell.co.uk/FloatLabelJS/

Простой, но удобный плагин: он работает с полями ввода и следит за тем, когда вы начнёте туда что-то вводить. Как только начнёте — он делает из названия поля мини-заголовок и помещает его наверх:

10. jQuery GoUp!

dnlnrs.github.io/jquery-goup/

Самый простой плагин в обзоре. Кнопка просто возвращает вас наверх, в самое начало страницы. Когда лень скроллить.

Версия сайта для слабовидящих на jQuery и плагин WordPress

23 сентября 2019 JavaScript jQuery

Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ.

Наша версия сайта для слабовидящих будет с удобным меню и уметь изменять размер шрифта, межстрочный и межбуквенный интервалы, отключать изображения и делать их черно-белыми, изменять фон страницы и даже озвучивать текст с помощью синтеза речи.

Все это возможно благодаря бесплатному плагину Button visually impaired за что огромное спасибо разработчикам за такой классный плагин!

Как сделать версию для слабовидящих на сайте с помощью плагина jQuery

Этот вариант подойдёт для любого сайта. Идем на сайт Button visually impaired и скачиваем файлы плагина по прямой ссылке или из репозитория на GitHub.

Копируем содержимое папки dist к себе на сайт.

Подключаем файлы стилей плагина как обычно между тегами <head></head>

<link rel="stylesheet" href="/css/bvi.min.css" type="text/css">
<link rel="stylesheet" href="/css/bvi-font.min.css" type="text/css">

И файлы JS скриптов перед закрывающим тегом </body>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="/js/responsivevoice.min.js"></script>
<script src="/js/js.cookie.js"></script>
<script src="/js/bvi-init.js"></script>
<script src="/js/bvi.min.js"></script>

Не поверите, но это практически все! Осталось только разместить кнопку для включения в любом месте сайта. И можно проверять работу плагина. Здесь есть информация об университете востребованных профессий https://expertali.ru/

<a href="#" title="Версия сайта для слабовидящих"><i></i> Версия сайта для слабовидящих</a>

При включении получаем следующий результат.

Версия для слабовидящих WordPress

Тут ещё проще! Устанавливаем плагин.

И размещаем кнопку включения в любом месте сайта с помощью шорткода [bvi text="Версия для слабовидящих"] или [bvi]

Озвучивание текста

При включении плагина выбранные опции озвучиваются используя синтез речи. Но это ещё не все. Вы можете озвучить любой текст сайта с помощью голосового помощника. Для этого задайте у тега с текстом класс bvi-voice

<div>Текст который нужно озвучить</div>

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

Поделиться:

Остались вопросы по статье? Задайте их прямо сейчас!

Похожие записи

Автоопределение города по IP на сайте

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ — это определить Читать далее

Подключение jQuery

jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

Сохранение данных в форме после обновления страницы

Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее

Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее

AJAX в 1C-Битрикс

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее

Отправка письма с вложениями на PHP и AJAX

Мы уже рассматривали, как сделать форму обратной связи на PHP и Ajax. Сегодня мы модернизируем её и научим отправлять приложенные файлы. HTML-код формы Добавляем в форму ещё одно поле файл: <form action=»»> <input type=»text» name=»name» required placeholder=»Ваше имя»> <input Читать далее

CSS3 цифровые часы с помощью jQuery

1
2
3
4
5
6
7
8
9
10

<div>
    <div></div>
    <ul>
        <li> </li>
        <li>:</li>
        <li> </li>
        <li>:</li>
        <li> </li>
    </ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
.container {
    width: 960px; 
    margin: 0 auto; 
    overflow: hidden;
}
 
.clock {
    width:800px; 
    margin:0 auto; 
    padding:30px; 
    border:1px solid #333; 
    color:#fff; 
}
 
#Date { 
    font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; 
    font-size:36px; 
    text-align:center; 
    text-shadow:0 0 5px #00c6ff; 
}
 
ul { 
    width:800px; 
    margin:0 auto; 
    padding:0px; 
    list-style:none; 
    text-align:center; 
}
 
ul li { 
    display:inline; 
    font-size:10em; 
    text-align:center; 
    font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; 
    text-shadow:0 0 5px #00c6ff; 
}
 
#point { 
    position:relative; 
    -moz-animation:mymove 1s ease infinite; 
    -webkit-animation:mymove 1s ease infinite; 
    padding-left:10px; 
    padding-right:10px; 
}
 
@-webkit-keyframes mymove 
{
    0% {
        opacity:1.0; 
        text-shadow:0 0 20px #00c6ff;
    }
 
    50% {
        opacity:0; 
        text-shadow:none; 
    }
 
    100% {
        opacity:1.0; 
        text-shadow:0 0 20px #00c6ff; 
    }	
}
 
 
@-moz-keyframes mymove 
{
    0% {
        opacity:1.0; 
        text-shadow:0 0 20px #00c6ff;
    }
 
    50% {
        opacity:0; 
        text-shadow:none; 
    }
 
    100% {
        opacity:1.0; 
        text-shadow:0 0 20px #00c6ff; 
    }	
}

1

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    $(document).ready(function() {
        // Создаем две переменные с названиями месяцев и названиями дней.
        var monthNames = [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" ]; 
        var dayNames= ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"]
 
        // Создаем объект newDate()
        var newDate = new Date();
        // "Достаем" текущую дату из объекта Date
        newDate.setDate(newDate.getDate());
        // Получаем день недели, день, месяц и год
        $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
 
        setInterval( function() {
            // Создаем объект newDate() и показывает секунды
            var seconds = new Date().getSeconds();
            // Добавляем ноль в начало цифры, которые до 10
            $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
        },1000);
 
        setInterval( function() {
            // Создаем объект newDate() и показывает минуты
            var minutes = new Date().getMinutes();
            // Добавляем ноль в начало цифры, которые до 10
            $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
        },1000);
 
        setInterval( function() {
            // Создаем объект newDate() и показывает часы
            var hours = new Date().getHours();
            // Добавляем ноль в начало цифры, которые до 10
            $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
        }, 1000);				
    });