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>
<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 class="imgdiv" 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>

 

posted @ 2013-07-23 15:41  ®Geovin Du Dream Park™  阅读(379)  评论(1)    收藏  举报