របៀបបង្កើត Hover Effect ជាមួយភាសា jquery

2017-01-26 Khemarak In ការរចនា, គន្លឹះផ្សេងៗ

អត្ថបទនេះ Techfree និយាយពីការប្រើប្រាស់ស្ទាយ Hover Effect  នៅលើគេហទំព័រ ដូចជាការកំនត់រូបភាពអោយមានលក្ខណះប្រែប្រួល នឹងការផ្លាស់ប្តូរូបរាងនៃទ្រង់ទ្រាយរូបភាព។ នៅក្នុងអត្ថបទនេះផងដែរ Techfree នឹងធ្វើលើកយកស្ទាយ hover effect​​ មួយចំនួនដោយប្រើភាសា jquery បូកបញ្ចូលជាមួយភាសា css មក បង្ហាញជូន លោកអ្នកដូចខាងក្រោម៖

សូមមើលវីដេអូខាងក្រោមដើម្បីស្វែងយល់ថាតើ hover effect style មានលក្ខណះយ៉ាងណានោះសូមមើលដូចខាងក្រោម៖

  1. ឧទាហរណ៍១៖ ទៅលើការប្រាស់ Hover effect លក្ខណះ Slide hover button
  • លោកអ្នកធ្វើការបង្កើត File HTML >>index.html រូចធ្វើការបញ្ចូលកូដដូចខាងក្រោម៖
  1. header File


Copy Link CDN :

<!– css –>
<link href=’http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic’ rel=’stylesheet’ type=’text/css’>
<link href=’http://fonts.googleapis.com/css?family=Oswald:400,300,700′ rel=’stylesheet’ type=’text/css’>
<!– js –>
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js

2.body

កូដខាងលើនេះមានន័យថាគ្រាន់តែធ្វើការទាញរូបភាពមកបង្ហាញធម្មតា។

  • បង្កើត File CSS>>css/base.css : css មួយនេះគឺយើងធ្វើកំនត់ស្ទាយទំរង់Template ដែលចង់បង្ហាញ ដោយលោកអ្នកធ្វើការ បញ្ចូលកូដដូច Techfree ផ្តល់ជូនខាងក្រោម ៖

លទ្ធផលខាងលើនឹងបង្ហាញដូចខាងក្រោម៖

  • ចំនុចបន្ទាប់គឺជាចំនុចសំខាន់ ដោយប្រើ កូដ Jquey ជាមួយ CSS ដើម្បីអោយ រូបភាព Hover មានចលនា ដោយលោកអ្នកធ្វើការ បង្កើត File javacript>> js/javacript.js រូចបញ្ចូលកូដដែល Techfree បានផ្តល់ជូនដូចខាងក្រោម៖

  • ការបង្កើតស្ទាយ Hover effect ពេលដែល code jquery ហៅទៅប្រើ ៖

លោកអ្នកធ្វើការបង្កើត Css ថ្មីមួយឈ្មោះថា: css/style.css រូចបញ្ចូលកូដដូចខាងក្រោម៖

លទ្ធផលនឹងបង្ហាញដូចខាងក្រោម៖

ឩទាហរណ៏២៖ ទៅលើការប្រាស់ Hover effect លក្ខណះ Slide hover In top

លោកអ្នកធ្វើការបង្កើត New File HTML>>index-2.hml រូចបញ្ចូលកូដដូចខាងក្រោម៖

1.header គឺដូចខាងលើ

2.body

  • បង្កើតស្ទាយ Hover ជាមួយ CSS ដោយលោកអ្នកធ្វើការបន្ថែមកូដទៅក្នុង css/style.css ដោយបញ្ចូលកូដដូចខាងក្រោម៖

លទ្ធផលនឹងបង្ហាញដូចខាងក្រោម៖

ឩទាហរណ៏៣៖ ទៅលើការប្រើប្រាស់ Hover effect លក្ខណះ Slide hover SLIDE IN LEFT

លោកអ្នកធ្វើការបង្កើត New File HTML>>index-3.hml រូចបញ្ចូលកូដដូចខាងក្រោម៖

1.header គឺដូចខាងលើ

2.body

បង្កើតស្ទាយ Hover ជាមួយ CSS ដោយលោកអ្នកធ្វើការបន្ថែមកូដទៅក្នុង css/style.css ដោយបញ្ចូលកូដដូចខាងក្រោម៖

លទ្ធផលនឹងបង្ហាញដូចខាងក្រោម៖

ឩទាហរណ៏៤៖ ទៅលើការប្រើប្រាស់ Hover effect លក្ខណះ Slide hover SLIDE IN RIGHT

លោកអ្នកធ្វើការបង្កើត New File HTML>>index-4.hml រួចបញ្ចូលកូដដូចខាងក្រោម៖

1.header គឺដូចខាងលើ

2.body

បង្កើតស្ទាយ Hover ជាមួយ CSS ដោយលោកអ្នកធ្វើការបន្ថែមកូដទៅក្នុង css/style.css ដោយបញ្ចូលកូដដូចខាងក្រោម៖

លទ្ធផលនឹងបង្ហាញដូចខាងក្រោម៖

ឩទាហរណ៏៥៖ ទៅលើការប្រាស់ Hover effect លក្ខណះ Slide hover SLIDE IN RIGHT

លោកអ្នកធ្វើការបង្កើត New File HTML>>index-5.hml រូចបញ្ចូលកូដដូចខាងក្រោម៖

1.header គឺដូចខាងលើ

2.body

បង្កើតស្ទាយ Hover ជាមួយ CSS ដោយលោកអ្នកធ្វើការបន្ថែមកូដទៅក្នុង css/style.css ដោយបញ្ចូលកូដដូចខាងក្រោម៖

លទ្ធផលនឹងបង្ហាញដូចខាងក្រោម៖

ឩទាហរណ៏៦៖ ទៅលើការប្រើប្រាស់ Hover effect លក្ខណះ Slide hover SLIDE IN RIGHT

លោកអ្នកធ្វើការបង្កើត New File HTML>>index-5.hml រូចបញ្ចូលកូដដូចខាងក្រោម៖

1.header គឺដូចខាងលើ

2.body

បង្កើតស្ទាយ Hover ជាមួយ CSS ដោយលោកអ្នកធ្វើការបន្ថែមកូដទៅក្នុង css/style.css ដោយបញ្ចូលកូដដូចខាងក្រោម៖

លទ្ធផលនឹងបង្ហាញដូចខាងក្រោម៖