สร้างเมนู เทคนิค ลูกตาปลา ด้วย 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>