สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย

เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee
เมนู jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เมนู jquery



ตัวอย่าง

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>


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ