Jquery

Jquery событиС Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ: НавСдСниС курсора Π½Π° элСмСнт Π² jQuery

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Бобытия β€” JQuery

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» ΠΈΠ· JQuery

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΈΠ· этого Ρ€Π°Π·Π΄Π΅Π»Π°, Π²Ρ‹ смоТСтС ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ события, происходящиС Π½Π° страницС (ΠΊΠ°ΠΊ Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ навСдСния курсора Π½Π° элСмСнт ΠΈΠ»ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ клавиши). Π Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΎ стандартных событиях javascript, Ρ‚Π°ΠΊ Π½ΠΎΠ²Ρ‹Ρ…, ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… самой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ jQuery.

Бписок Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ

Π‘Π°Π·ΠΎΠ²Ρ‹Π΅

.on()Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ для установки ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² событий Π½Π° Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты страницы.
.off()УдаляСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, установлСнныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒ .on().
.bind()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события Π½Π° Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты страницы. ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π΅ сработаСт Π½Π° элСмСнтах, ΠΏΠΎΡΠ²ΠΈΠ²ΡˆΠΈΡ…ΡΡ послС Π΅Π³ΠΎ установки.
.live()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события Π½Π° Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты страницы. ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ сработаСт ΠΈ Π½Π° элСмСнтах, ΠΏΠΎΡΠ²ΠΈΠ²ΡˆΠΈΡ…ΡΡ послС Π΅Π³ΠΎ установки.
.delegate()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события Π½Π° Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты страницы. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΡ‚ΠΎΡ‡Π½ΡΡŽΡ‰Π΅Π³ΠΎ сСлСктора. ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π½Π° элСмСнтах, ΠΏΠΎΡΠ²ΠΈΠ²ΡˆΠΈΡ…ΡΡ послС Π΅Π³ΠΎ установки.
.one()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события Π½Π° Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сработаСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ Ρ€Π°Π·Ρƒ, Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· элСмСнтов.
.unbind()УдаляСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий Ρƒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… элСмСнтов.
.die()УдаляСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» установлСн с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ live().
.undelegate()УдаляСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» установлСн с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ delegate().
.trigger()ВыполняСт ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ событиС ΠΈ запускаСт Π΅Π³ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ.
.triggerHandler()ЗапускаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ события, Π±Π΅Π· Π΅Π³ΠΎ выполнСния.
jQuery.proxy()По Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, создаСт Π΄Ρ€ΡƒΠ³ΡƒΡŽ, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ пСрСмСнная this Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π½Π° Π·Π°Π΄Π°Π½Π½ΠΎΠΌΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ.
eventΠžΠ±ΡŠΠ΅ΠΊΡ‚, содСрТащий Π΄Π°Π½Π½Ρ‹Π΅ ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌ событии. ΠŸΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ΡΡ всСм ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ событий.

Бобытия ΠΌΡ‹ΡˆΠΈ

.click()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ «ΠΊΠ»ΠΈΠΊΠ°» ΠΌΡ‹ΡˆΡŒΡŽ ΠΏΠΎ элСмСнту, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.dblclick()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ «ΠΊΠ»ΠΈΠΊΠ°» ΠΌΡ‹ΡˆΡŒΡŽ ΠΏΠΎ элСмСнту, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.hover()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π΄Π²ΡƒΡ… событий: появлСния/исчСзновСния курсора Π½Π°Π΄ элСмСнтом.
.mousedown()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.mouseup()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ поднятия ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.mouseenter()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ появлСния курсора Π² области элСмСнта, Π»ΠΈΠ±ΠΎ, запускаСт это событиС. ПоявлСниС этого события, ΠΎΡ‚Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ стандартного mouseover.
.mouseleave()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π²Ρ‹Ρ…ΠΎΠ΄Π° курсора ΠΈΠ· области элСмСнта, Π»ΠΈΠ±ΠΎ, запускаСт это событиС. ПоявлСниС этого события, ΠΎΡ‚Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ стандартного mouseout.
.mousemove()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ двиТСния курсора Π² области элСмСнта, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.mouseout()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π²Ρ‹Ρ…ΠΎΠ΄Π° курсора ΠΈΠ· области элСмСнта, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.mouseover()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ появлСния курсора Π² области элСмСнта, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.toggle()ΠŸΠΎΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎ выполняСт ΠΎΠ΄Π½Ρƒ ΠΈΠ· Π΄Π²ΡƒΡ… ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Π² ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° «ΠΊΠ»ΠΈΠΊ» ΠΏΠΎ элСмСнту.

Бобытия ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹

.keydown()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° клавиши ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π² Π½Π°ΠΆΠ°Ρ‚ΠΎΠ΅ состояниС, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.keyup()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ клавиши ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π² Π½Π΅Π½Π°ΠΆΠ°Ρ‚ΠΎΠ΅ состояниС, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.keypress()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π²Π²ΠΎΠ΄Π° символа с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.

Бобытия Ρ„ΠΎΡ€ΠΌΡ‹

.focus()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ получСния фокуса, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.blur()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΠΎΡ‚Π΅Ρ€ΠΈ фокуса, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.focusin()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ получСния фокуса самим элСмСнтом ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ….
.focusout()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΠΎΡ‚Π΅Ρ€ΠΈ фокуса самим элСмСнтом ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ….
.select()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ выдСлСния тСкста, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.submit()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.change()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ измСнСния элСмСнта Ρ„ΠΎΡ€ΠΌΡ‹, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.

Бобытия Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы

.ready()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ готовности Π΄Π΅Ρ€Π΅Π²Π° DOM.
.load()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ элСмСнта.
.unload()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΡƒΡ…ΠΎΠ΄Π° со страницы (ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ ΠΏΠΎ ссылкС, Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ.Ρ‚.Π΄.).

Бобытия Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

.error()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ошибки ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ элСмСнтов (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ отсутствиС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° сСрвСрС).
.resize()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.
.scroll()УстанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ «ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ» элСмСнтов Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π»ΠΈΠ±ΠΎ, запускаСт это событиС.

ΠœΠ΅Ρ‚ΠΎΠ΄ .hover() | jQuery справочник

basicweb.ru

  • HTML
    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ HTML
    • Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ Ρ‚Π΅Π³ΠΎΠ²
    • Атрибуты событий
    • Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹
    • ΠšΠΎΠ΄Ρ‹ языков
    • МнСмоники
    • Π¦Π²Π΅Ρ‚Π°
    • ВСсты Π·Π½Π°Π½ΠΈΠΉ
  • CSS
    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ CSS
    • Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ свойств
    • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹
    • Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ
    • ΠŸΡ€Π°Π²ΠΈΠ»Π°
    • Flexbox Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€
    • Grid Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€
    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ LESS
  • JavaScript
    • Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ Π²Π΅Π± API
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Array
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Date
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Function
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Global
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ JSON
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Math
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Number
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Object
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ RegExp
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Promise
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ String
  • jQuery
    • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹
    • Бобытия
    • ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ DOM
    • ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΡ
    • Π£Ρ‚ΠΈΠ»ΠΈΡ‚Ρ‹
    • Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹
    • AJAX
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Callbacks
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Deferred

HTML


  • HTML ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ

  • Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ Ρ‚Π΅Π³ΠΎΠ²

  • Атрибуты событий

  • Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

  • МнСмоники

  • ΠšΠΎΠ΄Ρ‹ языков

  • HTML Ρ†Π²Π΅Ρ‚Π°

  • ВСсты Π·Π½Π°Π½ΠΈΠΉ

CSS


  • CSS ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ

  • Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ свойств

  • CSS сСлСкторы

  • CSS Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ

  • CSS ΠΏΡ€Π°Π²ΠΈΠ»Π°

  • Flexbox Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€

  • Grid Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€

  • LESS ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ

JavaScript


  • Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ Π²Π΅Π± API

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Array

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Date

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Function

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Global

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ JSON

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Math β

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Number

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Object

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Promise

ΠœΠ΅Ρ‚ΠΎΠ΄ .mouseover() | jQuery справочник

basicweb.ru

  • HTML
    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ HTML
    • Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ Ρ‚Π΅Π³ΠΎΠ²
    • Атрибуты событий
    • Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹
    • ΠšΠΎΠ΄Ρ‹ языков
    • МнСмоники
    • Π¦Π²Π΅Ρ‚Π°
    • ВСсты Π·Π½Π°Π½ΠΈΠΉ
  • CSS
    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ CSS
    • Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ свойств
    • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹
    • Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ
    • ΠŸΡ€Π°Π²ΠΈΠ»Π°
    • Flexbox Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€
    • Grid Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€
    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ LESS
  • JavaScript
    • Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ Π²Π΅Π± API
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Array
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Date
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Function
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Global
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ JSON
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Math
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Number
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Object
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ RegExp
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Promise
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ String
  • jQuery
    • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹
    • Бобытия
    • ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ DOM
    • ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΡ
    • Π£Ρ‚ΠΈΠ»ΠΈΡ‚Ρ‹
    • Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹
    • AJAX
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Callbacks
    • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Deferred

HTML


  • HTML ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ

  • Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ Ρ‚Π΅Π³ΠΎΠ²

  • Атрибуты событий

  • Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

  • МнСмоники

  • ΠšΠΎΠ΄Ρ‹ языков

  • HTML Ρ†Π²Π΅Ρ‚Π°

  • ВСсты Π·Π½Π°Π½ΠΈΠΉ

CSS


  • CSS ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ

  • Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ свойств

  • CSS сСлСкторы

  • CSS Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ

  • CSS ΠΏΡ€Π°Π²ΠΈΠ»Π°

  • Flexbox Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€

  • Grid Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€

  • LESS ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ

JavaScript


  • Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ Π²Π΅Π± API

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Array

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Date

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Function

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Global

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ JSON

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Math β

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Number

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Object

  • ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Promise

jQuery | события ΠΌΡ‹ΡˆΠΈ

click()ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠΊΠ»ΠΈΠΊ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ
dblclick()Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΊΠ»ΠΈΠΊ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ
mouseover()Β Β mouseout()Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора Π½Π° элСмСнт;
Π²Ρ‹Ρ…ΠΎΠ΄ курсора Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта;
послС выполнСния Π½Π° элСмСнтС, событиС пСрСдаСтся Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅, Π²ΠΏΠ»ΠΎΡ‚ΡŒ Π΄ΠΎ Π½Π°Ρ‡Π°Π»Π° Π΄Π΅Ρ€Π΅Π²Π° DOM, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌ
mouseenter()Β Β mouseleave()Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора Π½Π° элСмСнт;
Π²Ρ‹Ρ…ΠΎΠ΄ курсора Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта;
послС выполнСния Π½Π° элСмСнтС, событиС Π½Π΅ пСрСдаСтся Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту
hover()устанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π΄Π²ΡƒΡ… событий:
mouseenter() β€” Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора Π½Π° элСмСнт;
mouseleave() β€” Π²Ρ‹Ρ…ΠΎΠ΄ курсора Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта;
mousedown()Β Β mouseup()клавиша ΠΌΡ‹ΡˆΠΈ Π½Π°ΠΆΠ°Ρ‚Π°, курсор находится Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ… элСмСнта;
клавиша ΠΌΡ‹ΡˆΠΈ ΠΎΡ‚ΠΏΡƒΡ‰Π΅Π½Π°, курсор находится Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ… элСмСнта;
toggle()ΠΏΠΎΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎ выполняСт Π΄Π²Π΅ ΠΈΠ»ΠΈ нСсколько Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° элСмСнтС;
jQuery 1.8 являСтся ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ, Π² jQuery 1.9 ΡƒΠ΄Π°Π»Π΅Π½
mousemove()устанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события ΠΏΡ€ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π³Ρ€Π°Π½ΠΈΡ† элСмСнта

Ѐункция выполняСтся ΠΏΡ€ΠΈ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ.

Β Β index.htmlΒ Β 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   var counter = 0;
   $('.a').click(function () {
    counter++;
    if(counter%2 != 0) {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    }
    else {
     $('.b').css({ 'display': 'none' }).text('');
    }
   });
  });
 </script>
</body>
</html>
Β 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   var counter = 0;
   $('.a').click(function () {
    counter++;
    if(counter%2 != 0) {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    }
    else {
     $('.b').css({ 'display': 'none' }).text('');
    }
   });
  });
 </script>
</body>
</html>
Β 

Ѐункция выполняСтся ΠΏΡ€ΠΈ Π΄Π²ΠΎΠΉΠ½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ.

Β Β index.htmlΒ Β 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   var counter = 0;
   $('.a').dblclick(function () {
    counter++;
    if(counter%2 != 0) {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    }
    else {
     $('.b').css({ 'display': 'none' }).text('');
    }
   });
  });
 </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   var counter = 0;
   $('.a').dblclick(function () {
    counter++;
    if(counter%2 != 0) {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    }
    else {
     $('.b').css({ 'display': 'none' }).text('');
    }
   });
  });
 </script>
</body>
</html>

Β 
Β 

mouseenter()Β Β mouseleave()

Ѐункция mouseenter() выполняСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт.

Ѐункция mouseleave() выполняСтся ΠΏΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ курсора Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта.

Β Β index.htmlΒ Β 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   /*ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт*/
   $('.a').mouseenter(function () {
    $('.b').css({ 'display': 'block' }).text('Hello World!');
   });
Β 
   /*ΠΏΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ курсора Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта*/
   $('.a').mouseleave(function () {
    $('.b').css({ 'display': 'none' }).text('');
   });
  });
 </script>
</body>
</html>
Β 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   /*ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт*/
   $('.a').mouseenter(function () {
    $('.b').css({ 'display': 'block' }).text('Hello World!');
   });
Β 
   /*ΠΏΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ курсора Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта*/
   $('.a').mouseleave(function () {
    $('.b').css({ 'display': 'none' }).text('');
   });
  });
 </script>
</body>
</html>
Β 

Ѐункция устанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π΄Π²ΡƒΡ… событий:

mouseenter() β€” Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора Π½Π° элСмСнт;

mouseleave() β€” Π²Ρ‹Ρ…ΠΎΠ΄ курсора Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта;

Β Β index.htmlΒ Β 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   $('.a').hover(
    /*ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт*/
    function () {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    },
    /*ΠΏΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ курсора Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта*/
    function () {
     $('.b').css({ 'display': 'none' }).text('');
    }
   );
  });
 </script>
</body>
</html>
Β 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #main {
   margin: 20px;
  }
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   $('.a').hover(
    /*ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт*/
    function () {
     $('.b').css({ 'display': 'block' }).text('Hello World!');
    },
    /*ΠΏΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ курсора Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта*/
    function () {
     $('.b').css({ 'display': 'none' }).text('');
    }
   );
  });
 </script>
</body>
</html>
Β 

Β 
Β 

mousedown()Β Β mouseup()

Ѐункция mousedown() выполняСтся ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши ΠΌΡ‹ΡˆΠΈ, курсор находится Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ… элСмСнта.

Ѐункция mouseup()выполняСтся, ΠΊΠΎΠ³Π΄Π° клавиша ΠΌΡ‹ΡˆΠΈ ΠΎΡ‚ΠΏΡƒΡ‰Π΅Π½Π°, курсор находится Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ… элСмСнта.

Β Β index.htmlΒ Β 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
Β 
  #main {
   margin: 20px;
  }
Β 
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
Β 
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   /*клавиша ΠΌΡ‹ΡˆΠΈ Π½Π°ΠΆΠ°Ρ‚Π°, курсор находится Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ… элСмСнта*/
   $('.a').mousedown(function () {
    $('.b').css({ 'display': 'block' }).text('Hello World!');
   });
Β 
   /*клавиша ΠΌΡ‹ΡˆΠΈ ΠΎΡ‚ΠΏΡƒΡ‰Π΅Π½Π°, курсор находится Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ… элСмСнта*/
   $('.a').mouseup(function () {
    $('.b').css({ 'display': 'none' }).text('');
   });
  });
 </script>
</body>
</html>
Β 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
Β 
  #main {
   margin: 20px;
  }
Β 
  .a {
   height: 35px;
   width: 100px;
   float: left;
   background-color: #1bb1dd;
   color: #FFF;
   text-align: center;
   line-height: 35px;
   font-size: 22px;
   border-radius: 3px;
   cursor: pointer;
  }
Β 
  .b {
   height: 35px;
   width: 300px;
   float: left;
   background-color: #87ffc5;
   margin-left: 20px;
   text-align: center;
   line-height: 35px;
   font-size: 20px;
   display: none;
  }
 </style>
</head>
<body>
 <div>
  <div>OK</div>
  <p></p>
 </div>
Β 
 <script>
  $(document).ready(function () {
   /*клавиша ΠΌΡ‹ΡˆΠΈ Π½Π°ΠΆΠ°Ρ‚Π°, курсор находится Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ… элСмСнта*/
   $('.a').mousedown(function () {
    $('.b').css({ 'display': 'block' }).text('Hello World!');
   });
Β 
   /*клавиша ΠΌΡ‹ΡˆΠΈ ΠΎΡ‚ΠΏΡƒΡ‰Π΅Π½Π°, курсор находится Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ… элСмСнта*/
   $('.a').mouseup(function () {
    $('.b').css({ 'display': 'none' }).text('');
   });
  });
 </script>
</body>
</html>
Β 

Ѐункция устанавливаСт ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события ΠΏΡ€ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π³Ρ€Π°Π½ΠΈΡ† элСмСнта.

Β Β index.htmlΒ Β 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
Β 
  #main {
   height: 400px;
   width: 400px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -200px;
   margin-left: -200px;
   background-color: #1bb1dd;
  }
Β 
  #box1 {
   margin: 30px;
   font-size: 36px;
  }
 </style>
</head>
<body>
 <div>
  <label>X : </label>
  <span></span>
  <br />
  <label>Y : </label>
  <span></span>
 </div>
 <div></div>
 <script>
  $(document).ready(function () {
   $('#main').mousemove(function (e) {
    $('#x').text(e.pageX);
    $('#y').text(e.pageY);
   });
  });
 </script>
</body>
</html>
Β 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°</title>
 <!-- ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΎΠ½Π»Π°ΠΉΠ½ Ρ‡Π΅Ρ€Π΅Π· Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
Β 
  #main {
   height: 400px;
   width: 400px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -200px;
   margin-left: -200px;
   background-color: #1bb1dd;
  }
Β 
  #box1 {
   margin: 30px;
   font-size: 36px;
  }
 </style>
</head>
<body>
 <div>
  <label>X : </label>
  <span></span>
  <br />
  <label>Y : </label>
  <span></span>
 </div>
 <div></div>
 <script>
  $(document).ready(function () {
   $('#main').mousemove(function (e) {
    $('#x').text(e.pageX);
    $('#y').text(e.pageY);
   });
  });
 </script>
</body>
</html>
Β 

Бобытия Π² jQuery

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ основному ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ

  • Π‘Π°ΠΌΠΎΡƒΡ‡ΠΈΡ‚Π΅Π»ΠΈ

    • HTML для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

    • CSS для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ HTML5

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ Canvas

    • XML для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ XML DTD

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ ΠΏΠΎ XML схСмам

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ XML DOM

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ XPath

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ ΠΏΠΎ XSLT

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ SVG

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ JavaScript

    • Π£Ρ‡Π΅Π±Π½ΠΈΠΊ jQuery

  • Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊΠΈ

    • HTML Ρ‚Π΅Π³ΠΈ

    • CSS свойства

    • ΠžΠ±Ρ‰ΠΈΠ΅ HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

    • HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹-события

    • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ XML схСмы

    • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ canvas

  • Π‘Ρ‚Π°Ρ‚ΡŒΠΈ

  • Новости

  • ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚

  • Π’Ρ…ΠΎΠ΄

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° событий Π² jQuery

<style>

Β Β Β Β * {box-sizing: border-box}

Β Β Β Β body { font-family: Tahoma;Β Β line-height: 150%; }

Β Β Β Β .test {

Β Β Β Β Β Β Β Β width: 90%;

Β Β Β Β Β Β Β Β margin: 25px auto;

Β Β Β Β }

Β Β Β Β .slideBox {

Β Β Β Β Β Β Β Β width: 480px;

Β Β Β Β Β Β Β Β height: 290px;

Β Β Β Β Β Β Β Β position: relative;

Β Β Β Β Β Β Β Β overflow: hidden;

Β Β Β Β Β Β Β Β float: left;

Β Β Β Β Β Β Β Β margin: 0 25px 25px 0;

Β Β Β Β Β Β Β Β border: 5px solid #ccc;

Β Β Β Β Β Β Β Β padding: 10px;Β Β 

Β Β Β Β Β Β Β Β background-color: #ac1259;

Β Β Β Β Β Β Β Β color: #fff;

Β Β Β Β }

Β Β Β Β .slideBox h3 {

Β Β Β Β Β Β Β Β margin: 0 0 15px;

Β Β Β Β Β Β Β Β font-size: 20px;

Β Β Β Β Β Β Β Β text-align: center;

Β Β Β Β }

Β Β Β Β .slideBox img {

Β Β Β Β Β Β Β Β position: absolute;

Β Β Β Β Β Β Β Β z-index: 2;

Β Β Β Β Β Β Β Β width: 100%;

Β Β Β Β Β Β Β Β left: 0; top: 0;

Β Β Β Β }

Β Β Β Β .slideBox .slide-content {

Β Β Β Β Β Β Β Β position: absolute;

Β Β Β Β Β Β Β Β z-index: 1;

Β Β Β Β Β Β Β Β padding: 10px;

Β Β Β Β }

</style>

<div>

Β 

Β Β Β Β <div>

Β Β Β Β Β Β  <img src=»images/nano-gallery.jpg» alt=»16 Π±Ρ€ΠΈΠ»Π»ΠΈΠ°Π½Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery» />

Β Β Β Β Β Β  <div>

Β Β Β Β Β Β Β Β Β Β <h3>16 Π±Ρ€ΠΈΠ»Π»ΠΈΠ°Π½Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery</h3>

Β Β Β Β Β Β Β Β Β Β <p>Из ΡΡ‚Π°Ρ‚ΡŒΠΈ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ эффСкты ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ

Β Β Β Β Β Β Β Β Β Β ΠΏΠ»Π°Π³ΠΈΠ½Π° <strong>jInvertscroll</strong>, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ классичСский Π΄ΠΈΠ·Π°ΠΉΠ½ мСню

          с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <strong>Slinky</strong>, ΠΊΠ°ΠΊΠΈΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒΒ Β Ρ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ

Β Β Β Β Β Β Β Β Β Β <strong>Tabslet</strong>, ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ слайдСр ΠΈΠ»ΠΈ ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ ΠΈΠ· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ тСкста, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠ² ΠΏΠ»Π°Π³ΠΈΠ½ <strong>Slick</strong>, ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ</p>

Β Β Β Β Β Β  </div>

Β Β Β Β </div> <!—end slideBox—>

Β Β 

Β Β Β Β <div>

Β Β Β Β <img src=»images/flip-clock.png» alt=»Π’Π°ΠΉΠΌΠ΅Ρ€ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ отсчСта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery» />

Β Β Β Β Β Β <div>

Β Β Β Β Β Β Β Β  <h3>Π’Π°ΠΉΠΌΠ΅Ρ€ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ отсчСта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery</h3>

Β Β Β Β Β Β Β Β  <p> jQuery ΠΏΠ»Π°Π³ΠΈΠ½ <strong>FlipClock</strong> построСн Π½Π° CSS3 + jQuery. Он позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ

Β Β Β Β Β Β Β Β Β Β  нСсколько ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ навСрняка пригодятся Π²Π°ΠΌ для Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€,

Β Β Β Β Β Β Β Β Β Β  ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‡Π°ΡΡ‚ΠΎΒ Β ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° посадочных страницах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠΎΠ±Ρ‰Π°ΡŽΡ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ акция закончится,

Β Β Β Β Β Β Β Β Β Β  Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Π΅Ρ€Π΅Π· 2 дня.</p>

Β Β Β Β Β Β </div>

Β Β Β Β </div> <!—end slideBox—>

</div>

<script>

Β Β Β Β $(function() {

Β Β Β Β Β Β Β Β $(«.slideBox»).hover(function() {

Β Β Β Β Β Β Β Β Β Β Β Β $(this).find(«img»).stop().animate({

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β top: ‘-120%’

Β Β Β Β Β Β Β Β Β Β Β Β }, 400);

Β Β Β Β Β Β Β Β }, function() {

Β Β Β Β Β Β Β Β Β Β Β Β $(this).find(«img»).stop().animate({

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β top: 0

Β Β Β Β Β Β Β Β Β Β Β Β }, 400);

Β Β Β Β Β Β Β Β });

Β Β Β Β })

</script>

20 Π²Π΅Π±-сайтов с творчСским эффСктом навСдСния указатСля ΠΌΡ‹ΡˆΠΈ

Π’ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄Π°ΠΆΠ΅ самый малСнький эффСкт ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ±Ρ‰Π΅Π΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ . это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ эффСкт сбоя, эффСкт отскока ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ простой Π·Π²ΡƒΠΊΠΎΠ²ΠΎΠΉ эффСкт. Один ΠΈΠ· этих эффСктов, часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π² наши Π΄Π½ΠΈ , — это эффСкт навСдСния ΠΈΠ»ΠΈ навСдСния курсора ΠΌΡ‹ΡˆΠΈ. Π­Ρ‚ΠΎΡ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½Ρ‹ΠΉ эффСкт ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ заставляСт Π΅Π³ΠΎ Π²Ρ‹Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ, ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ .

ИдСя эффСкта навСдСния указатСля ΠΌΡ‹ΡˆΠΈ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ усилия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠΈΡ‚ΡŒ для просмотра Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… свСдСний, доступа ΠΊ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ просмотра Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… прСдставлСний Π½Π° Π²Π΅Π±-сайтС. Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ эффСкт навСдСния ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ мСсто, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ большС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² . Π‘Π°ΠΌΡ‹ΠΉ ΡƒΠΌΠ½Ρ‹ΠΉ ΠΈΠ· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… способов .

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅: JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ для интСрСсных эффСктов ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ

Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π°Ρ‚ΡŒ ΠΌΠΎΠΈΠΌ читатСлям Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² этого интСрСсного эффСкта , я собрал 20 ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Π΅Π±-сайтов с эффСктом навСдСния курсора ΠΌΡ‹ΡˆΠΈ.ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠ·, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π²Π΅Π±-сайт, ΠΏΠΎΠΈΠ³Ρ€Π°ΠΉΡ‚Π΅ ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ сами , ΠΊΠ°ΠΊ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅ выглядит эффСкт навСдСния.

пиксСлСй Π’ΠΎΠΌΠ΅Ρ€Π° Π›Π΅Ρ€Π½Π΅Ρ€Π°

Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-сайт с Ρ‡Π΅Ρ€Π½ΠΎ-Π±Π΅Π»ΠΎΠΉ домашнСй страницСй, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… гСомСтричСских Ρ„ΠΈΠ³ΡƒΡ€ Ρ‚Π°Π½Ρ†ΡƒΡŽΡ‚ ΠΈ Ρ‚Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… курсора.

Π”ΠΎΠΌ

Haus — это сайт ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ агСнтства, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π»ΡŽΠ±ΠΈΡ‚ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ ΡŽΠΌΠΎΡ€ . НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΌΡƒΠ»ΡŒΡ‚ΡΡˆΠ½Ρ‹Π΅ Ρ„ΠΈΠ³ΡƒΡ€ΠΊΠΈ Π½Π° экранС ΠΈ посмотритС, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΡ€Ρ‹Π³Π°ΡŽΡ‚ ΠΈ Π±Π΅Π³Π°ΡŽΡ‚.

Canva

Canva — это сСрвис для создания Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… тСкстовых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ . Π˜Ρ… домашняя страница ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΡ‹Ρ‚Ρ‹ΠΉ Ρ„ΠΎΠ½, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°Π²Π΅Π΄Π΅Ρ‚Π΅ Π½Π° Π½Π΅Π΅ курсор, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ очищаСтся ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ изобраТСния Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ , ΠΊΠ°ΠΊ инструмСнт стирания.

Π“Π»Π°Π²Π½Ρ‹ΠΉ Π·Π°Π²ΠΎΠ΄

Π­Ρ‚ΠΎ сайт-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ студии творчСского ΠΌΠ΅Π΄ΠΈΠ°-производства Mainworks. НавСдитС курсор ΠΌΡ‹ΡˆΠΈ ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ Π² строкС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ .

Π‘Π΅Π΄Ρ€ΠΈΠΊ ΠŸΠ΅Ρ€Π΅ΠΉΡ€Π°

Π­Ρ‚ΠΎ сайт-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π‘Π΅Π΄Ρ€ΠΈΠΊΠ° ΠŸΠ΅Ρ€Π΅ΠΉΡ€Ρ‹ Π² ΠΏΠ°ΡΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΠ½Π°Ρ….Когда Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС, ΠΎΠ½ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‚ Ρ†Π²Π΅Ρ‚Π° ΠΈ изобраТСния . ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π΅Π³ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π½Π° .

Π‘Ρ‹ΠΊ

Bullmonk — это Π²Π΅Π±-сайт для управлСния бизнСсом с простой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ SVG Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС . ΠŸΡ€ΠΎΡΡ‚ΠΎ Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ с сСткой, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π² Π½Π΅ΠΌ сформировано отвСрстий .

InSymbiosis

InSymbiosis обСспСчиваСт Π±ΠΈΠΎΡ„Π°Ρ€ΠΌΠ°Ρ†Π΅Π²Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΏΡ€ΠΎΠΌΡ‹ΡˆΠ»Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠΉ стратСгиСй для ускорСния ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ лСкарств.ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΠΉΡ‚Π΅ ΠΌΡ‹ΡˆΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ микровзаимодСйствия с тСкстом, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈ элСмСнтами Ρ„ΠΎΠ½Π° .

OUI R Creative Studio

OUI R — это ΠΌΠ½ΠΎΠ³ΠΎΠΏΡ€ΠΎΡ„ΠΈΠ»ΡŒΠ½Π°Ρ студия Π΄ΠΈΠ·Π°ΠΉΠ½Π° , Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰Π°ΡΡΡ созданиСм ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ², основанных Π½Π° творчСских Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… идСях. Когда Π²Ρ‹ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ курсор ΠΌΡ‹ΡˆΠΈ Π½Π° изобраТСния, ΠΎΠ½ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΌΡ‹ΡˆΠΈ Π²Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ .

Минним

Minnim ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ домашнюю страницу с красочными Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΌΠΈ ΠΊΡ€ΡƒΠ³Π°ΠΌΠΈ , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ элСмСнт Ρ†ΠΈΠΊΠ»Π° с Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΡ‹ΡˆΠΈ.

ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚

Full Bundle — ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ΅ агСнтство. Π˜Ρ… домашняя страница Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π° Π½Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ: Π»ΠΎΠ³ΠΈΠΊΠ° с синими Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ с красными ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°ΠΌΠΈ . Когда Π²Ρ‹ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚Π΅ курсор ΠΌΡ‹ΡˆΠΈ Π½Π°Π΄ этими элСмСнтами, ΠΎΠ½ΠΈ ΠΎΡ‚ΡΠΊΠ°ΠΊΠΈΠ²Π°ΡŽΡ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠ»Π°Π²Π½ΠΎ .

FS Π‘Π΅Π· названия

FS Untitled ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ посСтитСлям Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ имя для начСртания ΡˆΡ€ΠΈΡ„Ρ‚Π° . На домашнСй страницС ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ ячСйки, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ открываСтся дСмонстрация ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° .

Trainrobber

Trainrobber — это агСнтство AR ΠΈ VR , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ создаСт Ρ€Π΅Π²ΠΎΠ»ΡŽΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ впСчатлСния ΠΎΡ‚ погруТСния для Π±Ρ€Π΅Π½Π΄ΠΎΠ². Когда Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, ΠΊΠ°ΠΊ Ρ€Π°Π·Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ вСстСрн . ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Ρ‚Π°ΠΊΠΆΠ΅ Π°Π½ΠΈΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ.

Sakura International Inc.

Sakura — японская компания, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‰Π°ΡΡΡ Π½Π° чСловСчСских сСтях. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅ ΠΎΠ΄Π½ΠΈΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΡ‹ΡˆΠΈ .

ВСнтилятор Бтудия

Fan Studio — это ΠΌΡƒΠ»ΡŒΡ‚ΡΡˆΠ½Ρ‹ΠΉ сайт, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΈΠ³Ρ€Ρ‹ ΠΈ прилоТСния. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ двиТСния , Ρ„ΠΎΠ½ пСрСмСщаСтся вмСстС с курсором ΠΌΡ‹ΡˆΠΈ .

Бтудия ΠŸΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ

Π­Ρ‚ΠΎ сайт Π±Ρ€Π΅Π½Π΄Π° ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½-студии , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ присутствия Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Π£ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ домашняя страница с Π±Π΅Π»Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ ΠΊΡ€ΡƒΠΆΠΊΠΎΠΌ. Но ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ «МСню», Π² ΠΊΡ€ΡƒΠ³Π΅ появляСтся ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Компания TheMcBrideCompany

На Π³Π»Π°Π²Π½ΠΎΠΉ страницС TheMcBrideCompany Π΅ΡΡ‚ΡŒ красивая пСйзаТная фотография, которая Ρ€Π°Π·ΠΌΡ‹Ρ‚Π°.Когда Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ курсор Π½Π° Ρ„ΠΎΠ½ , нСбольшая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π²ΠΎΠΊΡ€ΡƒΠ³ курсора становится ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΉ. Выглядит фантастичСски .

Π£ΠΌΠ½Ρ‹ΠΉ Π€Ρ€Π°Π½ΠΊΠ΅

Clever Franke — агСнтство ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ ΡΡ‚Ρ€Π°Ρ‚Π΅Π³ΠΈΡŽ, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΈ услуг . Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ динамичСски ΠΈ автоматичСски, Ρ‡Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Π²ΠΎΠ»ΡˆΠ΅Π±ΡΡ‚Π²ΠΎ. Когда Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ курсор Π½Π° Π½Π°Π΄ Π±ΡƒΠΊΠ²Π°ΠΌΠΈ, ΠΎΠ½ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π½Π° , Π½ΠΎ Ρ‡Π΅Ρ€Π΅Π· сСкунду ΠΎΡ‚ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚.

Π¦Π΅Π½Ρ‚Ρ€ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сообщСний

Π‘Π°ΠΉΡ‚ Π¦Π΅Π½Ρ‚Ρ€Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π° сообщСний

ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. На ΠΈΡ… домашнСй страницС прСдставлСно ярких Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² с полигональной Π³Π΅ΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΠ΅ΠΉ . Когда Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор ΠΌΡ‹ΡˆΠΈ Π½Π° эти Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΎΠ½ΠΈ становятся большС ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ Π΄Π΅Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ .

Волько Ρ‡Ρ‚ΠΎ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ

Just Coded ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ„ΠΎΠ½ с Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ, ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‰ΠΈΠΌΠΈ холст . Когда Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор Π½Π° этот холст, ΠΎΠ½ выглядит ΠΆΠΈΠ²Ρ‹ΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ пСрспСктиву .

ΠšΠΈΠ½Π΅Ρ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ прилоТСния

Π­Ρ‚ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Π½Ρ‹ΠΉ Π½Π°Π³Ρ€Π°Π΄Π°ΠΌΠΈ Π²Π΅Π±-сайт Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ агСнтства, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π·Π°ΠΏΠ°Ρ‚Π΅Π½Ρ‚ΠΎΠ²Π°Π½Π½ΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ для создания Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для устройств iOS ΠΈ Android . Π”ΠΎΠΌΠ°ΡˆΠ½ΡΡ страница выглядит ΠΊΠ°ΠΊ Π½Π΅Π±ΠΎ , ΠΈ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор ΠΌΡ‹ΡˆΠΈ, каТСтся, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅Ρ‚Π° .

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅: 30 простых ΠΈΠ΄Π΅ΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт красивСС

100+ jQuery Image Hover Effect Plugin с дСмонстрационным ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ

Flip Box — это простая ΠΈ Π»Π΅Π³ΠΊΠΎ настраиваСмая анимация ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€ΠΎΡ‚Π°.Он сдСлан с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Bootstrap ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. Π­Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для создания красивых Ρ„Π»ΠΈΠΏ-боксов ΠΈΠ»ΠΈ Ρ„Π»ΠΈΠΏ-ΠΊΠ°Ρ€Ρ‚ Π±Π΅Π· настройки ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ΄Π° javascript. Он ΠΈΠΌΠ΅Π΅Ρ‚ 12+ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², эффСкт Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΌΡ‹ΡˆΡŒΡŽ, эффСкт ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€ΠΎΡ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€ΠΎΡ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ настройки ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° любой Π²Π΅Π±-сайт.

МСня всСгда ΠΎΡ‡Π°Ρ€ΠΎΠ²Ρ‹Π²Π°Π» «эффСкт Π²ΠΎΠ΄Π½ΠΎΠΉ ряби», ΠΈ поэтому ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с Π½ΠΈΠΌ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получился нСбольшой ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² свои ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹.Как ΠΈ Π² случаС с ΠΌΠΎΠΈΠΌΠΈ послСдними ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ jQuery, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ «эффСкт Π²ΠΎΠ΄Π½ΠΎΠΉ ряби» с jQuery ΠΈΠ»ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ. Π’ качСствС zip ΠΈ minifiert этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ всСго 2 ΠšΠ‘.

БСгодня ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с Π²Π°ΠΌΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ идСями ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½ΠΎΠ³ΠΎ эффСкта навСдСния. Π­Ρ‚Π° концСпция проистСкаСт ΠΈΠ· эффСкта зависания, наблюдаСмого Π½Π° Merci-Michel, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Π΅Ρ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ приятноС ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ ΠΈΠ·-Π·Π° Π΅Π³ΠΎ плавности. ИдСя состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ стопку Π·Π° Π½Π°Π²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ΠΎΠΉ, которая ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ основной Ρ†Π²Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π·Π°Ρ‚Π΅ΠΌ быстро Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π°Π½ΠΈΠΌΠ΅ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ JavaScript .js для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Tilt.js — это ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½Ρ‹ΠΉ запрос AnimationFrame с Π»Π΅Π³ΠΊΠΈΠΌ эффСктом параллакса ΠΈ Π½Π°ΠΊΠ»ΠΎΠ½Π° 60+ ΠΊΠ°Π΄Ρ€ΠΎΠ² Π² сСкунду для jQuery.

Π£Ρ‡Π΅Π±Π½ΠΎΠ΅ пособиС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ простой эффСкт изобраТСния с нСбольшими Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ изобраТСния, Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΌΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΏΠ»Π°ΠΊΠ°Ρ‚Π°ΠΌΠΈ ΠΈ созданными с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ clip-path.

Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ исходит ΠΎΡ‚ ΠΏΠ»Π°ΠΊΠ°Ρ‚Π° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π“Ρ€Π°Π½Π΄-Каньона с Π·Π°Π±Π°Π²Π½Ρ‹ΠΌ эффСктом искаТСния: Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ части изобраТСния Π²Ρ‹Ρ€Π΅Π·Π°ΡŽΡ‚ΡΡ ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² Π΄Ρ€ΡƒΠ³ΠΎΠ΅ мСсто. Π”Π΅Ρ‚Π°Π»ΠΈ ΠΎΡ‡Π΅Π½ΡŒ малСнькиС, Ρ‡Ρ‚ΠΎ создаСт интСрСсный ΠΈ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²ΠΈΠ΄.БСгодня ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ эффСкт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ JavaScript.

НСкоторыС ΠΈΠ΄Π΅ΠΈ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ навСдСния с эффСктным эффСктом Π½Π°ΠΊΠ»ΠΎΠ½Π°. Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ эффСктом навСдСния Π½Π° Π²Π΅Π±-сайт Kikk 2015. ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ссылкой ΠΈΠ»ΠΈ просто ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ элСмСнтом сСтки) с эффСктом Π½Π°ΠΊΠ»ΠΎΠ½Π° Π΅Π³ΠΎ частСй. ИмСя Π² элСмСнтС нСсколько элСмСнтов (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ Β«Π½Π°ΠΊΠ»ΠΎΠ½Β»), ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ мноТСства ΠΎΡ‡Π΅Π½ΡŒ интСрСсных эффСктов. Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, элСмСнт «сияниС», ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΎΠ²Π΅Ρ€Π»Π΅ΠΉ с Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, элСмСнт Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ подпись.

ΠžΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ Π²Π΅Π±-Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π·Π° счСт использования Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… связСй (стрСлок) ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами страницы.

  • Π‘Ρ‚Ρ€Π΅Π»ΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ связь ΠΎΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта ΠΊ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌΡƒ, Π΄Π°ΠΆΠ΅ Ссли ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ / Ρ€Π°Π·ΠΌΠ΅Ρ€ этих элСмСнтов ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ;
  • НС навязчивый. Π‘Ρ‚Ρ€Π΅Π»ΠΊΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ скрыты ΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ находится Π½Π°Π΄ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтом (ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств). Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ всСгда Π²ΠΈΠ΄Π½Ρ‹;
  • ДоступныС Ρ„ΠΎΡ€ΠΌΡ‹: линия, полилиния, ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΡ€ΠΈΠ²Ρ‹Π΅ Π‘Π΅Π·ΡŒΠ΅ ΠΈ кубичСскиС ΠΊΡ€ΠΈΠ²Ρ‹Π΅ Π‘Π΅Π·ΡŒΠ΅;

jQuery Hover3d — это простой скрипт навСдСния для создания эффСкта Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ навСдСния.ИдСя состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт Π² Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠ΅ пространство с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прСобразования CSS3, ΠΏΠΎΠΈΠ³Ρ€Π°Ρ‚ΡŒ с translateZ для размСщСния элСмСнтов ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ для измСнСния значСния прСобразования.

Philter — это ΠΏΠ»Π°Π³ΠΈΠ½ JavaScript с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ CSS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ подсчСта Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² HTML. ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° эффСкты.

ΠšΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½Ρ‹ΠΉ взгляд Π½Π° события Π² jQuery

Π­Ρ‚Ρƒ ΡΡ‚Π°Ρ‚ΡŒΡŽ Ρ€Π΅Ρ†Π΅Π½Π·ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ Π’Π΅Ρ€Π½ АнчСта ΠΈ Камило РСйСс. Бпасибо всСм Ρ€Π΅Ρ†Π΅Π½Π·Π΅Π½Ρ‚Π°ΠΌ SitePoint Π·Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ сдСлали ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ SitePoint ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅!

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ всС дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° Π²Π΅Π±-страницС ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ зафиксированы Π² jQuery ΠΊΠ°ΠΊ события.Бобытия Π²Π°ΠΆΠ½Ρ‹ Π² Ρ‚ΠΎΠΌ смыслС, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π°ΠΌ Π½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ измСняСт Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π²Π΅Π±-страницы Π² зависимости ΠΎΡ‚ наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ событий ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

jQuery ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² быстрого доступа, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ contextmenu () , hover () ΠΈ keyup () , для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… событий. Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌ, jQuery Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт ΠΎΠ±Ρ‰ΠΈΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π½Π° , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ для любого события: on ('eventName', handler) .Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ эти ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой просто ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ для стандартных событий DOM, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ для этих событий Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ JavaScript.

Π’ этом руководствС ΠΌΡ‹ ΠΊΡ€Π°Ρ‚ΠΊΠΎ рассмотрим всС эти ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ событий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ Π½Π° ΠΏΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΎΠΊΠΈΡ… ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ, ΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π½ΠΈΠΌΠΈ.

Бобытия Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

Π’ этой ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Ρ‚Ρ€ΠΈ события. Π­Ρ‚ΠΎ error , resize ΠΈ scroll .Ошибка . Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ запускаСтся, ΠΊΠΎΠ³Π΄Π° Ρ‚Π°ΠΊΠΈΠ΅ элСмСнты, ΠΊΠ°ΠΊ изобраТСния, Π½Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Π•Π³ΠΎ ярлык устарСл с jQuery вСрсии 1.8, поэтому Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ('error', handler) вмСсто .

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

Π­Ρ‚ΠΎ событиС запускаСтся ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π² зависимости ΠΎΡ‚ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π° основС Internet Explorer ΠΈ WebKit Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π΅ΠΏΡ€Π΅Ρ€Ρ‹Π²Π½ΠΎ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Opera, Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ Π΅Π³ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΊΠΎΠ½Ρ†Π΅ события измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅ мСняСт мСстами ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ src Π² зависимости ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π°.

  $ (ΠΎΠΊΠ½ΠΎ) .resize (function () {
  var windowWidth = $ (ΠΎΠΊΠ½ΠΎ) .width ();
  if (windowWidth <= 600) {
    $ ("img"). attr ("src", "image-src-here.jpg");
    
  }
});
  

Π­Ρ‚Π° дСмонстрация CodePen ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ событиС Π² дСйствии:

Π‘ΠΌ. ΠŸΠ΅Ρ€ΠΎ Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° SitePoint (@SitePoint) Π½Π° CodePen.

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ свитка

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это событиС, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π΄ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² этом ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ элСмСнтС.Помимо ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° window , это событиС ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ любой элСмСнт с полосой ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. НапримСр, любой элСмСнт со свойством пСрСполнСния , установлСнным для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, ΠΈΠ»ΠΈ любой ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ iframe ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ это событиС.

Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ вызываСтся ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ полоТСния ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. ΠŸΡ€ΠΈΡ‡ΠΈΠ½Π° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ значСния Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π·Π²Π°Π½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ клавиш со стрСлками, Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΈΠ»ΠΈ пСрСтаскиваниСм полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈΠ»ΠΈ использованиСм колСса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΌΡ‹ΡˆΠΈ. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄Π΅ ΠΌΡ‹ провСряСм, ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΠ» Π»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π±ΠΎΠ»Π΅Π΅ 500 пиксСлСй ΠΈ выполняСм Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ дСйствия.

  $ (ΠΎΠΊΠ½ΠΎ) .scroll (function () {
  if ($ (ΠΎΠΊΠ½ΠΎ) .scrollTop ()> = 500) {
    $ ("# alert"). text ("Π’Ρ‹ достаточно ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΠ»ΠΈ!");
    
  }
});
  

Π’ дСмонстрации CodePen Π½ΠΈΠΆΠ΅, Ссли Π²Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ ΠΈ достигнСтС ΠΊΠΎΠ½Ρ†Π°, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΡ‡Ρ‚ΠΈ Π² самом Π½ΠΈΠ·Ρƒ Π²Π΅Π±-страницы:

Π‘ΠΌ. ΠŸΠ΅Ρ€ΠΎ Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ SitePoint (@SitePoint) Π½Π° CodePen.

Бобытия Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ²

jQuery ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ для Ρ‚Ρ€Π΅Ρ… событий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ Π² зависимости ΠΎΡ‚ состояния Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΠ»ΠΈ DOM.Π­Ρ‚ΠΎ load , unload ΠΈ ready .

load () ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для присоСдинСния ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ внСшний рСсурс, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ изобраТСния, скрипты, iframe ΠΈ сам ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ window . Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ запускаСтся, ΠΊΠΎΠ³Π΄Π° элСмСнт, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΠ½ΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΎ, вмСстС со всСми подэлСмСнтами ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½. ΠŸΡ€ΠΈ использовании с изобраТСниями Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ нСсколько ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΎΠ½ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ всплываСт ΠΏΠΎ Π΄Π΅Ρ€Π΅Π²Ρƒ DOM. Вторая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ являСтся Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΌ ΠΈ кроссбраузСрным.

Π’Ρ‹Π³Ρ€ΡƒΠ·ΠΊΠ° Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ запускаСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΡ…ΠΎΠ΄ΠΈΡ‚ с Π²Π΅Π±-страницы. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΡ‚ΠΈ ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ» ссылку, Π²Π²Π΅Π» Π½ΠΎΠ²Ρ‹ΠΉ URL-адрСс Π² Π°Π΄Ρ€Π΅ΡΠ½ΡƒΡŽ строку ΠΈΠ»ΠΈ Π·Π°ΠΊΡ€Ρ‹Π» ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π­Ρ‚ΠΎ событиС Ρ‚Π°ΠΊΠΆΠ΅ вызываСтся ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ страницы. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ использованиС preventDefault () Π½Π΅ отмСняСт событиС unload . Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹Π·ΠΎΠ²Ρ‹ alert () , confirm () ΠΈ prompt () Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ этого ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° событий, Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ:

  $ (ΠΎΠΊΠ½ΠΎ).unload (function () {
  alert (Β«ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, Π½Π΅ ΡƒΡ…ΠΎΠ΄ΠΈ!Β»);
});
  

И load (), , ΠΈ unload () устарСли, начиная с вСрсии 1.8.

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ готовности

Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв Π½Π΅Ρ‚ нСобходимости Π² ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ всСх элСмСнтов, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ изобраТСния, ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ скрипт смоТСт Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ иСрархия DOM ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ построСна. Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ ready позаботится ΠΎΠ± этом Π·Π° вас. Π›ΡŽΠ±Ρ‹Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹Π΅ ΠΊ этому ΡΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ, Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ DOM Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ‚ΠΎΠ².Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ jQuery ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам.

ДСмонстрация CodePen Π½ΠΈΠΆΠ΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. Π’Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ DOM становится Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ изобраТСния.

Π‘ΠΌ. ΠŸΠ΅Ρ€ΠΎ Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ готовности DOM ΠΎΡ‚ SitePoint (@SitePoint) Π½Π° CodePen.

Если ваш ΠΊΠΎΠ΄ зависит ΠΎΡ‚ значСния Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… свойств стиля CSS, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ сначала ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ссылку Π½Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй ΠΈΠ»ΠΈ встроСнныС стили ΠΏΠ΅Ρ€Π΅Π΄ Π΅Π³ΠΎ запуском.

Бобытия ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹

Бобытия ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π·Π²Π°Π½Ρ‹ Π»ΡŽΠ±Ρ‹ΠΌ взаимодСйствиСм ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€ΠΎΠΉ. КаТдоС Ρ‚Π°ΠΊΠΎΠ΅ событиС Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ клавишС ΠΈ Ρ‚ΠΈΠΏΠ΅ события. Π’ jQuery Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ сочСтания клавиш для событий ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ - keydown () , keyup () ΠΈ keypress () .

Бобытия Keyup ΠΈ Keydown

Как слСдуСт ΠΈΠ· названия, keyup запускаСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ отпускаСт ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅, Π° keydown запускаСтся всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅.ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΎΠ±ΠΎΠΈΡ… этих событий ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Ρ‹ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту, Π½ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°ΠΏΡƒΡ‰Π΅Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Ρ‚ΠΎΠ³ΠΎ элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ находится Π² фокусС.

РСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство which ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° event , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, какая клавиша Π±Ρ‹Π»Π° Π½Π°ΠΆΠ°Ρ‚Π°. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ свойства для хранСния этой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Π° jQuery Π½ΠΎΡ€ΠΌΠ°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ свойство which для Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠ³ΠΎ извлСчСния этой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° Π²Π΅Ρ‰ΡŒ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ стоит ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Π° эти события Π½Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈ ΠΈ сдвигом + .Π’ послСднСм случаС ΠΈ shift ΠΈ a Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄Π΅ я ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΎΠΊΠ½ΠΎ прСдупрСТдСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ рСгистрируСт любоС событиС keydown . ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши y ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ элСмСнт удаляСтся ΠΈΠ· DOM.

  $ ("# alert"). Keydown (function (event) {
  switch (event.which) {
    case 89:
    $ ("# элСмСнт"). remove ();
    ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π°;
  }
});
  

Π‘ΠΌ. ΠŸΠ΅Ρ€ΠΎ Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ наТатия клавиши SitePoint (@SitePoint) Π½Π° CodePen.

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ наТатия клавиши

Π­Ρ‚ΠΎ событиС Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ ΡΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ keydown . Одно ΠΈΠ· основных Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΉ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ клавиши-ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈ клавиши Π±Π΅Π· ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Shift , Esc ΠΈ Ρ‚. Π”., НС Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ событиС keypress . Π― Π½Π΅ ΠΌΠΎΠ³Ρƒ это ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π³ΠΎΠ²ΠΎΡ€ΡŽ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ событиС keypress для ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Π° ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π½Π°ΠΆΠ°Ρ‚ΠΈΠΉ клавиш, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ клавиши со стрСлками. keypress ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ символ Π±Ρ‹Π» Π²Π²Π΅Π΄Π΅Π½, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, A ΠΈΠ»ΠΈ a .

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° скрываСт элСмСнт Π² зависимости ΠΎΡ‚ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ клавиши:

  $ ("Ρ‚Π΅Π»ΠΎ"). Keypress (функция (событиС) {
  switch (event.keyCode) {
    case 75:
    
    $ (". K"). Css ("дисплСй", "Π½Π΅Ρ‚");
    ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π°;
  }
});
  

Π‘ΠΌ. ΠŸΠ΅Ρ€ΠΎ Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ наТатия клавиши ΠΎΡ‚ SitePoint (@SitePoint) Π½Π° CodePen.

Бобытия ΠΌΡ‹ΡˆΠΈ

Бобытия ΠΌΡ‹ΡˆΠΈ Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ взаимодСйствуСт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ устройства, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΡ‹ΡˆΠΈ. Бобытия ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ основаны Π½Π° Ρ‰Π΅Π»Ρ‡ΠΊΠ°Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ click , dblclick ΠΈ contextmenu , ΠΈΠ»ΠΈ Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, mouseenter , mouseleave ΠΈ mousemove .Π’ этом Ρ€Π°Π·Π΄Π΅Π»Π΅ я ΠΊΡ€Π°Ρ‚ΠΊΠΎ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€ΡŽ ΠΈΡ… всС ΠΈ Π²ΠΊΠ»ΡŽΡ‡Ρƒ нСсколько дСмонстраций, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ различия ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ.

Бобытия Π½Π° основС ΠΊΠ»ΠΈΠΊΠΎΠ²

Π’ jQuery ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ ΠΏΡΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² событий Π½Π° основС Ρ‰Π΅Π»Ρ‡ΠΊΠ°. Бобытия mousedown ΠΈ mouseup , ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΠΉ, Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ ΠΈ отпускаСт ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΡ‹ΡˆΠΈ Π½Π°Π΄ элСмСнтом соотвСтствСнно. Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, событиС click запускаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΡ‹ΡˆΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π½Π°ΠΆΠ°Ρ‚Π°, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΎΡ‚ΠΏΡƒΡ‰Π΅Π½Π° Π½Π°Π΄ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ элСмСнтом.

dblclick Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ слоТнСС. Π§Ρ‚ΠΎΠ±Ρ‹ событиС Π±Ρ‹Π»ΠΎ зарСгистрировано ΠΊΠ°ΠΊ dblclick , Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΎ Π΄Π²Π° быстрых Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΌΡ‹ΡˆΡŒΡŽ Π΄ΠΎ истСчСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ систСмно-зависимого Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°. НС слСдуСт ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ элСмСнту ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ для click ΠΈ dblclick , ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ события, запускаСмыС ΠΏΡ€ΠΈ Π΄Π²ΠΎΠΉΠ½ΠΎΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅, зависят ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. НСкоторыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π²Π° события ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΏΠ΅Ρ€Π΅Π΄ Π΄Π²ΠΎΠΉΠ½Ρ‹ΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ просто Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ событиС ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΏΠ΅Ρ€Π΅Π΄ Π΄Π²ΠΎΠΉΠ½Ρ‹ΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ.

ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½ΠΎΠ΅ мСню Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ запускаСтся послС Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΏΠΎ элСмСнту, Π½ΠΎ нСпосрСдствСнно ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ контСкстного мСню. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ контСкстного мСню ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅ событий.

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ контСкстного мСню ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ вмСсто этого ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ настраиваСмоС мСню:

  $ ("img"). Contextmenu (function (event) {
  event.preventDefault ();
  $ ("# настраиваСмоС-мСню")
    .show (). css ({
      Π²Π²Π΅Ρ€Ρ…Ρƒ: event.pageY + 10,
      слСва: event.pageX + 10
      
    });
});

$ ("# custom-menu #option"). click (function () {
   $ ("img"). toggleClass ("имя-класса");
   
});
  

Π­Ρ‚Π° дСмонстрация примСняСт стили CSS ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ настраиваСмоС контСкстноС мСню:

Π‘ΠΌ. ΠŸΠ΅Ρ€ΠΎ Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ contextmenu ΠΎΡ‚ SitePoint (@SitePoint) Π½Π° CodePen.

Бобытия, основанныС Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ

НСкоторыС события основаны Π½Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π°Π΄ элСмСнтом, Π²Π½ΡƒΡ‚Ρ€ΡŒ ΠΈ ΠΈΠ· элСмСнта.БущСствуСт ΡˆΠ΅ΡΡ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² событий, основанных Π½Π° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ.

НачнСм с событий mouseover ΠΈ mouseenter . Как слСдуСт ΠΈΠ· названия, ΠΎΠ±Π° эти события Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² элСмСнт. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ события mouseleave ΠΈ mouseout ΡΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚, ΠΊΠΎΠ³Π΄Π° ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ элСмСнт.

Одно Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ mouseleave ΠΈ mouseout состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ запускаСтся, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ пСрСмСщаСтся Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ элСмСнта, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΠ½ привязан.Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, mouseout запускаСтся Π΄Π°ΠΆΠ΅ для ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΉ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ Π»ΡŽΠ±Ρ‹Ρ… ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΎΠ² этого элСмСнта. Π’ΠΎΡ‡Π½ΠΎ такая ΠΆΠ΅ Ρ€Π°Π·Π½ΠΈΡ†Π° сущСствуСт ΠΌΠ΅ΠΆΠ΄Ρƒ mouseenter ΠΈ mouseover .

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ события двиТСния Pen Mouse ΠΎΡ‚ SitePoint (@SitePoint) Π½Π° CodePen.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ количСство событий mouseenter ΠΈ mouseover измСняСтся Π² зависимости ΠΎΡ‚ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ ΠΌΡ‹ΡˆΠΈ. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π²ΠΎΠΉΡ‚ΠΈ Π² Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ синюю ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ с ΠΏΡ€Π°Π²ΠΎΠΉ стороны ΠΈ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚Π΅ΡΡŒ прямо ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π²ΠΎΠΉΡ‚ΠΈ Π² ΠΏΡ€Π°Π²ΡƒΡŽ Ρ€ΠΎΠ·ΠΎΠ²ΡƒΡŽ ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ.И mouseenter , ΠΈ mouseover Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠΌΠ΅Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 1. Если Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ΡΡŒ Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΎΠΉΠ΄Π΅Ρ‚Π΅ Π² Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅, счСтчик mouseover измСнится Π½Π° Π΄Π²Π°. Π­Ρ‚ΠΎ происходит ΠΈΠ·-Π·Π° всплытия событий событиСм mouseover . Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ mouseover Π½Π° Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠΌ ΠΏΠΎΠ»Π΅ «пузырится» Π΄ΠΎ внСшнСго синСго поля, увСличивая счСтчик события mouseover Π½Π° 1. Когда Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ΡΡŒ дальшС Π²Π»Π΅Π²ΠΎ ΠΈ ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ‚Π΅ΡΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΠ±ΠΎΠΈΠΌΠΈ Ρ€ΠΎΠ·ΠΎΠ²Ρ‹ΠΌΠΈ полями, событиС mouseover запускаСтся снова.К Ρ‚ΠΎΠΌΡƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΄ΠΎΠΉΠ΄Π΅Ρ‚Π΅ Π΄ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края синСго поля, количСство событий mouseover Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ 5, Π° количСство событий mouseenter Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π²Π½ΠΎ 1.

Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅ рассуТдСния ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ для объяснСния количСства событий mouseleave ΠΈ mouseout . ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈ посмотритС, ΠΊΠ°ΠΊ измСнится счСт.

Бобытия Mousemove ΠΈ Hover

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ mousemove запускаСтся, ΠΊΠΎΠ³Π΄Π° ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ пСрСмСщаСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта.Он срабатываСт ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ, Π΄Π°ΠΆΠ΅ Ссли Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ составляСт всСго ΠΎΠ΄ΠΈΠ½ пиксСль. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π·Π° ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ΅ врСмя ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΏΡƒΡ‰Π΅Π½Ρ‹ сотни событий. Как Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ слоТных ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° событий ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. РСкомСндуСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий mousemove максимально эффСктивным ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ большС Π½Π΅ Π½ΡƒΠΆΠ΅Π½.

hover срабатываСт, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ³Π΄Π° ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² элСмСнт ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ Π΅Π³ΠΎ. Π•ΡΡ‚ΡŒ Π΄Π²Π° способа Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ hover .ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ:

  $ ("ваш-сСлСктор"). Hover (handlerIn, handlerOut);
  

Π—Π΄Π΅ΡΡŒ handlerIn () выполняСтся, ΠΊΠΎΠ³Π΄Π° ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² элСмСнт, ΠΈ handlerOut () , ΠΊΠΎΠ³Π΄Π° ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ Π΅Π³ΠΎ. Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ:

  $ ("ваш-сСлСктор"). Hover (handlerInOut);
  

На этот Ρ€Π°Π· ΠΎΠ΄Π½Π° ΠΈ Ρ‚Π° ΠΆΠ΅ функция handlerInOut выполняСтся ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ Π²Ρ…ΠΎΠ΄Π΅ Π² , Ρ‚Π°ΠΊ ΠΈ ΠΏΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΈΠ· элСмСнта .

Π‘ΠΌ. ΠŸΠ΅Ρ€ΠΎ Бобытия навСдСния ΠΈ пСрСмСщСния ΠΌΡ‹ΡˆΠΈ ΠΎΡ‚ SitePoint (@SitePoint) Π½Π° CodePen.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π’ этой дСмонстрации ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ эффСкты Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π° CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² IE.

Бобытия Ρ„ΠΎΡ€ΠΌΡ‹

Π€ΠΎΡ€ΠΌΡ‹ повсСмСстны Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. ΠŸΠΎΡ‡Ρ‚ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ заполняСт Ρ„ΠΎΡ€ΠΌΡƒ. Π’ jQuery Π΅ΡΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ событий Ρ„ΠΎΡ€ΠΌΡ‹. Π­Ρ‚ΠΈ события ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ значСния ΠΈΠ»ΠΈ ΠΏΠΎΡ‚Π΅Ρ€Π΅ фокуса. Π•ΡΡ‚ΡŒ сСмь Ρ„ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… мСроприятий, ΠΈ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΎΠ±ΡΡƒΠΆΠ΄Π°Ρ‚ΡŒ ΠΈΡ… всС ΠΎΠ΄Π½ΠΎ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ.

Бобытия Blur, Focus, Focusin ΠΈ Focusout

Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ focus запускаСтся всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус.Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ элСмСнтам Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ Ρ‚Π΅Π³Π°ΠΌ привязки. Π§Ρ‚ΠΎΠ±Ρ‹ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ focus Π½Π° любом Π΄Ρ€ΡƒΠ³ΠΎΠΌ элСмСнтС, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ свойство tabindex элСмСнта. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ установка фокуса Π½Π° скрытыС элСмСнты ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ ошибкС Π² Internet Explorer. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ событиС фокуса Π±Π΅Π· явной установки фокуса, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ triggerHandler ("focus") .

Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ запускаСтся всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° элСмСнт тСряСт фокус.Π’ старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… это событиС ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ элСмСнтам Ρ„ΠΎΡ€ΠΌΡ‹.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ события focus , focusin запускаСтся всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ элСмСнт ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΎΠΊ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ фокус. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ focusout запускаСтся всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ элСмСнт ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠΈ Ρ‚Π΅Ρ€ΡΡŽΡ‚ фокус. Π˜Ρ‚Π°ΠΊ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ события всплывали, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ вмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти Π΄Π²Π° события.

Бобытия Π²Ρ‹Π±ΠΎΡ€Π°, измСнСния ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ

ИзмСнСниС Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ запускаСтся, ΠΊΠΎΠ³Π΄Π° элСмСнт измСняСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.Π­Ρ‚ΠΎ событиС ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ элСмСнтам ,

2024 Β© ВсС ΠΏΡ€Π°Π²Π° Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Ρ‹. ΠšΠ°Ρ€Ρ‚Π° сайта