jQuery实现鼠标放到图片上，放大图片

<script src="../../Script/jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".imgstate").hover(function (e) {
                var screenWidth = $(window).width();
                var screenHeight = $(window).height();
                var imgWidth = $("#imgBigImg").width();
                var imgHeight = $("#imgBigImg").height();

                var strSrc = $(this).attr("bigSrc");
                var tagX = $(this).offset().left + $(this).width();
                //var tagY = $(this).offset().top + $(this).height();
                if (tagX + imgWidth > screenWidth) {
                    tagX = tagX - imgWidth - 20;
                }
                else {
                    tagX = tagX + 200;
                }
                var sdf = document.documentElement.scrollTop;
                var sdfd = ($(window).height() - imgHeight) / 2;
                var tagY = ($(window).height() - imgHeight) / 2 + document.documentElement.scrollTop;
                $("#imgBigImg").attr("src", strSrc);
                $("#div_BigImg").css({ top: tagY, left: tagX }).show();
            }, function () {
                //$("#imgBigImg").hide();
                $("#div_BigImg").hide();
            });
        });
    </script>

　　

<div id="div_BigImg" style="z-index: 5; width: 600px; margin: 0px 0 0 -200px;
            position: absolute; text-align: center; padding: 20px; display: none;">
            <img id='imgBigImg' height="480px" width="600px" class="imgBigImg" src="" style="
                padding: 0; margin: 0; cursor: pointer;" />
        </div>
        <table style="width: 600px; margin: 0 auto; z-index: 0;">
            <tr>
                <td>
                    <asp:DataList ID="dlModeList" runat="server" RepeatColumns="8" RepeatDirection="Horizontal"
                        Width="600px" DataKeyField="Id">
                        <ItemTemplate>
                            <table>
                                <tr>
                                    <td style="height: 130px; vertical-align: top;">
                                        <asp:HyperLink ID="lnkTitleName3" runat="server" NavigateUrl='<%# Eval("UpFile", "~/{0}") %>'
                                            Target="_blank" ToolTip='<%# Eval("Name") %>'>
                                          <img class="imgstate" src='../../<%# Eval("UpFileThumbnail") %>' bigSrc='../../<%# Eval("Upfile") %>'  width="150px" height="130px" border="0"/>
                                        </asp:HyperLink>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="height: 35px; vertical-align: top;">
                                        <asp:Image ID="imgIconNew1" runat="server" ImageUrl="~/App_Themes/Default/Images/Icon/NewChs.gif"
                                            Visible='<%# zhy_CommClass.zhyPageView.HideItemByAddDate(Eval("AddDate"), 2) %>'>
                                        </asp:Image>
                                        <asp:HyperLink ID="lnkTitleName2" runat="server" NavigateUrl='<%# Eval("UpFile", "~/{0}") %>'
                                            Target="_blank"> <%# zhy_CommClass.zhyPageView.ShowStringFieldByMaxSize(Eval("Name"), 8) %>
                                        </asp:HyperLink>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                        <ItemStyle Width="155px" />
                    </asp:DataList>
                </td>
            </tr>
      </table>