របៀបបង្កើត Hover Effect ជាមួយភាសា jquery
អត្ថបទនេះ Techfree និយាយពីការប្រើប្រាស់ស្ទាយ Hover Effect នៅលើគេហទំព័រ ដូចជាការកំនត់រូបភាពអោយមានលក្ខណះប្រែប្រួល នឹងការផ្លាស់ប្តូរូបរាងនៃទ្រង់ទ្រាយរូបភាព។ នៅក្នុងអត្ថបទនេះផងដែរ Techfree នឹងធ្វើលើកយកស្ទាយ hover effect មួយចំនួនដោយប្រើភាសា jquery បូកបញ្ចូលជាមួយភាសា css មក បង្ហាញជូន លោកអ្នកដូចខាងក្រោម៖
សូមមើលវីដេអូខាងក្រោមដើម្បីស្វែងយល់ថាតើ hover effect style មានលក្ខណះយ៉ាងណានោះសូមមើលដូចខាងក្រោម៖
- ឧទាហរណ៍១៖ ទៅលើការប្រាស់ Hover effect លក្ខណះ Slide hover button
- លោកអ្នកធ្វើការបង្កើត File HTML >>index.html រូចធ្វើការបញ្ចូលកូដដូចខាងក្រោម៖
- 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 ដោយបញ្ចូលកូដដូចខាងក្រោម៖
លទ្ធផលនឹងបង្ហាញដូចខាងក្រោម៖
