jQuery:mouseover and Increase the Size of an Image-阿里云开发者社区

jQuery:mouseover and Increase the Size of an Image

2013-07-23 1014

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： <!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 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>

jQuery:mouseover and Increase the Size of an Image

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

jQuery:mouseover and Increase the Size of an Image

热门文章

最新文章

相关电子书