สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย
17 August 2009ตัวอย่าง
Javascript Code
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul#eyefish li a img").hover(function(){ /* เงื่อนไขเมื่อเอาเมาส์เคลื่อนอยู่เหนือรูปภาพ*/
$(this).animate({
width:120,
height:100
},300);
},function(){ /* เงื่อนไขเมื่อเอาเมาส์เคลื่อนอยู่ออกจากรูปภาพ*/
$(this).animate({ /* กำหนดการเคลื่อนไหวด้วยการลดขนาดความกว้างและความสูงของรูป ใช้เวลาหน่วง 0.300 วินาที*/
width:85,
height:71
},300);
});
});
</script>
CSS Code
<style type="text/css">
img{/* กำหนดขอบให้กับ รูปภาพ*/
border:0;
}
ul#eyefish{ /* กำหนดขอบเขตของเมนู */
margin:0;padding:0;
margin-left:100px;
display:block;
height:100px;
}
ul#eyefish li{ /* กำหนด css ให้กับ list รายการเมนู*/
list-style:none outside;
float:left;
}
ul#eyefish li a img{ /* กำหนดขนาดเริ่มต้นให้กับรูปภาพ */
width:85px;
height:71px;
}
</style>
Html Code
<ul id="eyefish"> <li><a href="#"><img src="images/calendar.png" /></a></li> <li><a href="#"><img src="images/email.png" /></a></li> <li><a href="#"><img src="images/history.png" /></a></li> <li><a href="#"><img src="images/home.png" /></a></li> <li><a href="#"><img src="images/music.png" /></a></li> <li><a href="#"><img src="images/portfolio.png" /></a></li> <li><a href="#"><img src="images/video.png" /></a></li> </ul>
บทความคนเข้าอ่านวันนี้
02 Oct 10 สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย อ่าน 2449 25 Sep 08 ป้องกันคนคลิกขวา และ ป้องกันคน select ข้อความ อ่าน 1898 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 4640 16 Oct 09 สร้างฟังก์ชัน php แปลงตัวเลข เป็นข้อความตัวอักษร ภาษาไทย อ่าน 2155 14 Feb 09 คำนวณหาอายุ จากวันเกิด ด้วย php อ่าน 4560 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2378 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 932 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3993 25 Sep 08 ทบทวนคำสั่ง sql อ่าน 9149 02 Apr 10 สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css อ่าน 4631 02 Nov 10 แนะนำ และการใช้งาน jQuery Colorpicker Plugin การเลือกค่าสี อ่าน 1451 25 Mar 09 ใช้งาน cookie ในการจำค่าชื่อผู้ใฃ้และรหัสผ่าน ด้วย javascript และ php อ่าน 2659 23 Jan 12 แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQuery อ่าน 336 05 Nov 08 แสดงป้ายโฆษณา banner แบบสุ่ม random ด้วย ajax อย่างง่าย อ่าน 4342 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 4283 29 Dec 10 เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์ อ่าน 4126 11 Nov 10 แนะนำ การแทรก swf ไฟล์ ด้วย jQuery SWFObject Plugin อ่าน 2377 09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 1041 19 Nov 09 สร้าง scrollbar แนวตั้ง จากรูปภาพ ด้วยเทคนิค css sprite image และ jQuery อ่าน 3689 27 Aug 10 เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ อ่าน 4682







