jQuery:mouseover and Increase the Size of an Image

最新推荐文章于 2021-03-05 09:19:18 发布

geovi

最新推荐文章于 2021-03-05 09:19:18 发布

阅读量886

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/geovi/article/details/9422795

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>

geovi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery:mouseover and Increase the Size of an Image

jQuery:mouseover and Increase the Size of an Image .imgdiv img { height:100px; width:100px; } .imgdiv { backgr
复制链接

扫一扫