jQuery:mouseover and Increase the Size of an Image

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 

 html xmlns="http://www.w3.org/1999/xhtml" 

 head 

 meta content="text/html; charset=utf-8" http-equiv="Content-Type" / 

 meta name="author" content="geovindu,塗聚文"/ 

 title jQuery:mouseover and Increase the Size of an Image /title 

 style type="text/css" 

 .imgdiv img

 height:100px;

 width:100px;

 .imgdiv

 background-color:White;

 margin-left:auto;

 margin-right:auto;

 padding:10px;

 border:solid 0px #c6cfe1;

 height:500px;

 width:450px;

 /style 

 script type="text/javascript"

 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 

 /script 

 script type="text/javascript" 

 //塗聚文 2013 07 23 修改

 //鼠標移動到層中的圖片自動放大

 $(function() {

 $("#imgdiv img").mouseover(function(e) {

 var newImg =  img src=

 + $(this).attr("src") +  /img 

 $(#ladiv)

 .html($(newImg)

 .animate({ height: 300, width: 450 }, 1500));

 $("#imgdiv img").mouseout(function(e) {

 var newImg =  img src=

 + $(this).attr("src") +  /img 

 $(#ladiv)

 .html($(newImg)

 .animate({ height: 0, width: 0 }, 10));

 }); 

 /script 

 /head 

 body 

 form id="form1" runat="server" 

 div id="imgdiv" 

 h2 mouseover on the thumbnail to view a large image /h2 

 br / 

 img src="pictures/1.jpg" alt="" / 

 img src="pictures/2.jpg" alt="" / 

 img src="pictures/3.jpg" alt="" / 

 img src="pictures/4.jpg" alt="" / 

 hr / br / 

 div id="ladiv" /div 

 /div 

 /form /body 

 /html 

geovindu 读者是,读之者,者之读.一沙一世界! to be is to do举世皆清我独浊,众人皆醒我独醉.俺是农民工,程序员.