jQuery:mouseover and Increase the Size of an Image

来源：互联网发布：caxa线切割编程软件编辑：程序博客网时间：2024/05/22 10:58
<!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>