结合JQuery实现点击图片查看大图 

HTML：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestJQuery.aspx.cs" Inherits="Sleven.WebForm.WebForm.JQuery.TestJQuery" %>
<!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 runat="server">
    <title>JQuery测试</title>
    <style type="text/css">
        .exampleImg { height:100px; cursor:pointer;}
    </style>
    <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <%--<script src="http://www.cnblogs.com/Scripts/jquery-1.4.2.js" type="text/javascript"></script>--%>
    <script type="text/javascript" language="javascript">
        //alert($);
//        (function (window, undefined) {
//            var MyJQuery = function () {
//                window.MyjQuery = window.$ = jQuery; window.$ = MyJQuery;
//            };
//        })(window);
        //        alert($);        jQuery.fn.ImgZoomIn = function () {
            bgstr = '<div id="ImgZoomInBG" style=" background:#000000; filter:Alpha(Opacity=70); opacity:0.7; position:absolute; left:0; top:0; z-index:10000; width:100%; height:100%; display:none;"><iframe src="about:blank" frameborder="0" scrolling="no" style="width:100%; height:100%;"></iframe></div>';
            imgstr = '<img id="ImgZoomInImage" src="' + $(this).attr('src') + '" title="点击关闭" onclick=$(\'#ImgZoomInImage\').hide();$(\'#ImgZoomInBG\').hide(); style="cursor:pointer; display:none; position:absolute; z-index:10001;" />';
            if ($('#ImgZoomInBG').length < 1) {
                $('body').append(bgstr);
            }
            if ($('#ImgZoomInImage').length < 1) {
                $('body').append(imgstr);
            }
            else {
                $('#ImgZoomInImage').attr('src', $(this).attr('src'));
            }
            $('#ImgZoomInImage').css('left', $(window).scrollLeft() + ($(window).width() - $('#ImgZoomInImage').width()) / 2);
            $('#ImgZoomInImage').css('top', $(window).scrollTop() + ($(window).height() - $('#ImgZoomInImage').height()) / 2);
            $('#ImgZoomInBG').show();
            $('#ImgZoomInImage').show();
        };        $(document).ready(function () {
            $("#imgTest").bind("click", function () {
                $(this).ImgZoomIn();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%--<input type="button" id="btnTest1" value="Test ShowDiv"/>--%>
        <%--<img src="http://www.cnblogs.com/Images/3.jpg" id="imgTest" alt="图片"/>--%>
        <img alt="" class="exampleImg" src='http://www.cnblogs.com/Images/3.jpg' style="vertical-align:top;" onclick="$(this).ImgZoomIn();" title="点击查看大图" /></p>
    </div>
    </form>
</body>
</html>