zoukankan      html  css  js  c++  java
  • 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;
                100px;
            }
            .imgdiv
            {
                background-color:White;
                margin-left:auto;
                margin-right:auto;
                padding:10px;
                border:solid 0px #c6cfe1;
                height:500px;
                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',  '450' }, 1500));
                 });
                 $("#imgdiv img").mouseout(function(e) {
                		var newImg = '<img src='
                                    + $(this).attr("src") + '></img>';
                 	$('#ladiv')
    					.html($(newImg)
                        .animate({ height: '0',  '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>
    
  • 相关阅读:
    10 Iterable之遍历Map、Set、Array
    9 Map和Set
    8 循环
    5 字符串
    6 数组
    4 数据类型
    2 变量
    实现简单的邮件收发器(十二)
    10.19 初识django
    10.18 数据库之索引优化方案
  • 原文地址:https://www.cnblogs.com/geovindu/p/3208657.html
Copyright © 2011-2022 走看看