求教.NET 2.0前台下的一个问提

本人找到一段放大图片的代码 在普通页面的前台body下放置 可以实现功能
但是放入FORMVIEW并绑定数据库字段后，就失效了实现代码如下：
<body>
<img alt="" src="pp.jpg" onmousemove="zoom()" id="srcImg" />
<div style="overflow:hidden">
    <img src="pp.jpg" alt="" id="zoomImg" />
</div>
<script language="javascript" type="text/javascript">
    srcImg.height = srcImg.height/2;
    var zoomRate = 5;
    zoomImg.height = srcImg.height*zoomRate;
    zoomImg.parentNode.style.width = srcImg.width;
    zoomImg.parentNode.style.height = srcImg.height;
    function zoom()
    {
        var elm = event.srcElement;
        h = elm.offsetHeight/zoomRate/2;
        w = elm.offsetWidth/zoomRate/2;
        var x = event.x-elm.offsetLeft;
        x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
        zoomImg.style.marginLeft=(w-x)*zoomRate;
        var y = event.y-elm.offsetTop;
        y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
        zoomImg.style.marginTop=(h-y)*zoomRate;
    }
</script>
</body>失效的代码略有改动，把关键部分弄出来，如下：
<img alt="" src='<%# Eval("WatchImage") %>' onmousemove="zoom()" id="srcImg" />
                        <div style="overflow:hidden">
                            <img src='<%# Eval("WatchImage") %>' alt="" id="zoomImg" />
                        </div>
                        <script language="javascript" type="text/javascript">
                            srcImg.height = srcImg.height/2;
                            var zoomRate = 5;
                            zoomImg.height = srcImg.height*zoomRate;
                            zoomImg.parentNode.style.width = srcImg.width;
                            zoomImg.parentNode.style.height = srcImg.height;
                            function zoom()
                            {
                                var elm = event.srcElement;
                                h = elm.offsetHeight/zoomRate/2;
                                w = elm.offsetWidth/zoomRate/2;
                                var x = event.x-elm.offsetLeft;
                                x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
                                zoomImg.style.marginLeft=(w-x)*zoomRate;
                                var y = event.y-elm.offsetTop;
                                y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
                                zoomImg.style.marginTop=(h-y)*zoomRate;
                            }
                        </script>
        </ItemTemplate>
    </asp:FormView>向达人们求教！！！！！！！

解决方案 »

  1.   

    zoomImg.parentNode.style.width = srcImg.width;
    zoomImg.parentNode.style.height = srcImg.height;
    ------
    问题在这
    之前 zoomImg.parentNode 是 document  or  body 现在是 FormView 生成的html tag 可能是 td
      

  2.   


    zoomImg.parentNode 是 div
      

  3.   

    你把生成的HTML 代码在这贴下，我开完会帮你看下
      

  4.   

    我将DIV改成TR或TD依然没用 您的意思是zoomImg.parentNode只针对DIV的属性有效吗？我刚才并没有撤销DIV的构架 依然没用哎
      

  5.   

    以下为整张失效页面的HTML代码：<%@ Page Language="C#" MasterPageFile="~/WatchShop.master" AutoEventWireup="true" CodeFile="ProInfo.aspx.cs" Inherits="ProInfo" Title="产品详情" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:FormView ID="fvProInfo" runat="server">
            <ItemTemplate>
                <table id="Table2" style="width: 633px; height: 363px" onclick="return TABLE1_onclick()">
                    <tr>
                        <td colspan="2" style="text-align: center">
                            <asp:Label ID="Label6" runat="server" Text='<%# Eval("WatchName") %>'></asp:Label></td>
                    </tr>
                    <tr>
                        <td rowspan="6" style="width: 42px; text-align: center; height:500px">
                            
                        </td>
                        <td style="width: 101px; text-align: center; height: 131px;">
                            原产地：<asp:Label ID="Label1" runat="server" Text='<%# Eval("WatchOrigin") %>'></asp:Label></td>
                    </tr>
                    <tr>
                        <td style="width: 101px; text-align: center; height: 136px;">
                            类别：<asp:Label ID="Label4" runat="server" Text='<%# Eval("WatchClassName") %>'></asp:Label></td>
                    </tr>
                    <tr>
                        <td style="width: 101px; text-align: center; height: 78px;">
                            价格：<asp:Label ID="Label2" runat="server" Text='<%# Eval("WatchPrice") %>'></asp:Label></td>
                    </tr>
                    <tr>
                    </tr>
                    <tr>
                    </tr>
                </table>
                <table style="width: 795px; height: 268px">
                    <tr>
                        <td style="width: 126px; height: 313px; text-align: center">
                            &nbsp;
                            <asp:TextBox ID="TextBox1" runat="server" Height="272px" Text='<%# Eval("WatchIntro") %>'
                                TextMode="MultiLine" Width="573px"></asp:TextBox></td>
                    </tr>
                </table>
                            
                            <img alt="" src='<%# Eval("WatchImage") %>' onmousemove="zoom()" id="srcImg" />
                            <div id="pic" style="overflow:hidden">
                                <img src='<%# Eval("WatchImage") %>' alt="" id="zoomImg" />
                            </div>
                            <script language="javascript" type="text/javascript">
                                srcImg.height = srcImg.height/2;
                                var zoomRate = 5;
                                zoomImg.height = srcImg.height*zoomRate;
                                zoomImg.parentNode.style.width = srcImg.width;
                                zoomImg.parentNode.style.height = srcImg.height;
                                function zoom()
                                {
                                    var elm = event.srcElement;
                                    h = elm.offsetHeight/zoomRate/2;
                                    w = elm.offsetWidth/zoomRate/2;
                                    var x = event.x-elm.offsetLeft;
                                    x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
                                    zoomImg.style.marginLeft=(w-x)*zoomRate;
                                    var y = event.y-elm.offsetTop;
                                    y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
                                    zoomImg.style.marginTop=(h-y)*zoomRate;
                                }
                            </script>
            </ItemTemplate>
        </asp:FormView>
    </asp:Content>
      

  6.   

     
     
    <!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><title>
    产品详情
    </title><link href="news.css" rel="stylesheet" type="text/css" /></head>
    <body>
        <form name="aspnetForm" method="post" action="ProInfo.aspx?id=12" id="aspnetForm">
    <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIOTgyNTk4NDgPZBYCZg9kFgICAw9kFgICCQ9kFgICAQ88KwAKAQAPFgQeC18hRGF0YUJvdW5kZx4LXyFJdGVtQ291bnQCAWQWAmYPZBYGZg8PFgIeB1Zpc2libGVoZGQCAQ9kFgJmD2QWCgIBDw8WAh4EVGV4dAUi5bid6Ii1RVRB5py66IqvIDE4S+iHquWKqOacuuaisOihqGRkAgMPDxYCHwMFBueRnuWjq2RkAgUPDxYCHwMFDueUt+ihqCAgICAgICAgZGQCBw8PFgIfAwUEMTk2MGRkAgoPFQIRcHJvX2ltYWdlcy8wMi5qcGcRcHJvX2ltYWdlcy8wMi5qcGdkAgIPDxYCHwJoZGQYAQUjY3RsMDAkQ29udGVudFBsYWNlSG9sZGVyMSRmdlByb0luZm8PFCsAB2RkZGRkFgACAWQgnXHHnX9m29REcOhtijnAeUF0pA==" />
    </div>
     
    <div id="all">
        <div id="head">
                <div id="lead1">
                    <a id="ctl00_HyperLink2" href="Default.aspx"><img src="images/01.jpg" style="border-width:0px;" /></a></div>
                
                <div id="lead2">
                    <a id="ctl00_HyperLink4" href="NewsList.aspx"><img src="images/03.jpg" style="border-width:0px;" /></a></div>
                
                <div id="lead3">
                    <a id="ctl00_HyperLink6" href="ProList.aspx"><img src="images/02.jpg" style="border-width:0px;" /></a></div>
                
                <div id="lead4">
                    <a id="ctl00_HyperLink7" href="Message.aspx"><img src="images/04.jpg" style="border-width:0px;" /></a></div>   
        </div>
        <div id="nav10"></div>
        <div id="mid1_3">
            
    <table cellspacing="0" border="0" id="ctl00_ContentPlaceHolder1_fvProInfo" style="border-collapse:collapse;">
    <tr>
    <td colspan="2">
                <table id="Table2" style="width: 633px; height: 363px" onclick="return TABLE1_onclick()">
                    <tr>
                        <td colspan="2" style="text-align: center">
                            <span id="ctl00_ContentPlaceHolder1_fvProInfo_Label6">帝舵ETA机芯 18K自动机械表</span></td>
                    </tr>
                    <tr>
                        <td rowspan="6" style="width: 42px; text-align: center; height:500px">
                            
                        </td>
                        <td style="width: 101px; text-align: center; height: 131px;">
                            原产地：<span id="ctl00_ContentPlaceHolder1_fvProInfo_Label1">瑞士</span></td>
                    </tr>
                    <tr>
                        <td style="width: 101px; text-align: center; height: 136px;">
                            类别：<span id="ctl00_ContentPlaceHolder1_fvProInfo_Label4">男表        </span></td>
                    </tr>
                    <tr>
                        <td style="width: 101px; text-align: center; height: 78px;">
                            价格：<span id="ctl00_ContentPlaceHolder1_fvProInfo_Label2">1960</span></td>
                    </tr>
                    <tr>
                    </tr>
                    <tr>
                    </tr>
                </table>
                <table style="width: 795px; height: 268px">
                    <tr>
                        <td style="width: 126px; height: 313px; text-align: center">
                            &nbsp;
                            <textarea name="ctl00$ContentPlaceHolder1$fvProInfo$TextBox1" rows="2" cols="20" id="ctl00_ContentPlaceHolder1_fvProInfo_TextBox1" style="height:272px;width:573px;">商品属性 
            [品牌]         帝舵 
            [系列]         王子系列 
            [款式]         男款 
            [型号]         TU003 
            [机芯]         原装瑞士ETA全自动机芯 
            [表盘]         银白色镶钻表面 
            [镜面]         蓝宝石水晶玻璃 
            [表壳]         精钢表壳及黄金表圈 
            [表带]         精钢间黄金表带 
            [防水]         50米 
            [厚度]         约11mm 
            [尺寸]         34mm 
            [功能]         日历 
            [配件]         原装盒，说明书，质保卡，吊牌，香港发票 
    编号：ECS000131 
    </textarea></td>
                    </tr>
                </table>
                            
                            <img alt="" src='pro_images/02.jpg' onmousemove="zoom()" id="srcImg" />
                            <div style="overflow:hidden">
                                <img src='pro_images/02.jpg' alt="" id="zoomImg" />
                            </div>
                            <script language="javascript" type="text/javascript">
                                srcImg.height = srcImg.height/2;
                                var zoomRate = 5;
                                zoomImg.height = srcImg.height*zoomRate;
                                zoomImg.parentNode.style.width = srcImg.width;
                                zoomImg.parentNode.style.height = srcImg.height;
                                function zoom()
                                {
                                    var elm = event.srcElement;
                                    h = elm.offsetHeight/zoomRate/2;
                                    w = elm.offsetWidth/zoomRate/2;
                                    var x = event.x-elm.offsetLeft;
                                    x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
                                    zoomImg.style.marginLeft=(w-x)*zoomRate;
                                    var y = event.y-elm.offsetTop;
                                    y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
                                    zoomImg.style.marginTop=(h-y)*zoomRate;
                                }
                            </script>
            </td>
    </tr>
    </table>
     
        </div>
        <div id="mid1_4"></div>
        <div id="mid7" style="text-align:center">
              <img alt="" src="images/main_60.jpg" />
        </div>
    </div>  
         
        
    <div>
     
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLhvOjrDAL9tbfkC6cR1uhWcMgVC73tXJvF+6H6Rz15" />
    </div></form>
    </body>
    </html>
      

  7.   

    我看了一下，应该是td的问题。div overflow:hidden 受 td 的影响 没显示出来图片一定要放在 FormView 内么？
      

  8.   

    楼主 你要搞清楚 这个作用的对象都不一样 能实现吗？
    你找的这段代码作用的是DIV标签 而你切要作用到FormView
    我觉得吧 要实现的话 要改很多东西
    函数  zoom 一定需要变动 我还是建议你找个JQuery的例子
    那样会好改一点
      

  9.   

    src='<%# Eval("WatchImage") %>'
    ---------------
    忘记你这里绑定了你可以换个写法来绑定的 在后台定义一个变量 protected string src="";然后给src 赋值 src=xx.WatchImage;src='<%# Eval("WatchImage") %>'
    =》
    src='<%= src %>'就可以了还有一个需要改动的地方srcImg.height = srcImg.height/2;
    =》
    var srcImg=document.getElementById('srcImg');
    var zoomImg=document.getElementById('zoomImg');
    srcImg.height = srcImg.height/2;
      

  10.   

    src=xx.WatchImage这里的XX是？
    原来的div是否保留呢？如果去掉，那div里的style="overflow:hidden"属性怎么办
      

  11.   

    我的WatchImage是一张表 不是一个数据库
    XX是实例吗？直接引用似乎不行啊
      

  12.   

    xx 指的是FormView 绑定的数据源之前的DIV 要保留的就是原来什么样 还让它什么样var srcImg=document.getElementById('srcImg');
    var zoomImg=document.getElementById('zoomImg');这两句是从浏览器兼容性考虑的
      

  13.   

    我按你的方法 后台插入了
    ProBll info = new ProBll();
    string src="";
    info.WatchImage = src;    前台还是放在TR中，改为
    src='<%= “src”%>'出来的还是两个叉叉 不过是在表里了
      

  14.   

    前台src如果不加引号 会说不存在这个名称 打不开网页
      

  15.   

    ProBll info = new ProBll();
    string src="";
    info.WatchImage = src;
     
    不是这样的可能会是这样的ProBll info = new ProBll();
    protected string src="";
    info= GetInfo(); //此处的GetInfo 是从数据库中读取相关数据并返回info实例
      src=info.WatchImage;
    FormView.DataSource= info ;
    FormView.DataBind();
      

  16.   

    这样可以吗ProBll info = new ProBll();
        protected void Page_Load(object sender, EventArgs e)
        {
            
            string watchID = Request.QueryString["id"] == null ? "" : Request.QueryString["id"];
            if (watchID != "")
            {
                fvProInfo.DataSource = info.getProDataByWatchId(Convert.ToInt32(watchID));
                fvProInfo.DataBind();
                string src="";
                DataSet ds = info.getProDataByWatchId(Convert.ToInt32(watchID));
                src = ds.Tables[0].Rows[0]["WatchImage"].ToString();
            }            
        }
      

  17.   

    protected string src="";protected void Page_Load(object sender, EventArgs e)
    {string watchID = Request.QueryString["id"] ?? "" ;
    if (watchID != "")
    {
    //这句就是获取数据源的方法
    DataSet ds = info.getProDataByWatchId(Convert.ToInt32(watchID));
    src = ds.Tables[0].Rows[0]["WatchImage"].ToString();
    fvProInfo.DataSource = ds;
    fvProInfo.DataBind();
    }
    }
      

  18.   

    误导了吧？zoomImg是单一ID，你绑定了列表，里面就会出现多个zoomImg，但只有一个是能获取到的，所以不能绑定单一的ID应该绑定动太IDzoomImg1，zoomImg2，zoomImg3
      

  19.   


    <img alt="" src='<%# Eval("WatchImage") %>' onmousemove="zoom(<%#Container.ItemIndex%>)" id="srcImg<%#Container.ItemIndex%>" />
    <div id="pic" style="overflow:hidden">
    <img src='<%# Eval("WatchImage") %>' alt="" id="zoomImg<%#Container.ItemIndex%>" />
    </div>
    </ItemTemplate>
    </asp:FormView>
    <script language="javascript" type="text/javascript">
    function zoom(n)
    {
    srcImg.height = srcImg.height/2;
    var zoomRate = 5;
    document.getElementById('zoomImg'+n).height = document.getElementById('srcImg'+n).height*zoomRate;
    document.getElementById('zoomImg'+n).parentNode.style.width = document.getElementById('srcImg'+n).width;
    document.getElementById('zoomImg'+n).parentNode.style.height = document.getElementById('srcImg'+n).height;var elm = event.srcElement;
    h = elm.offsetHeight/zoomRate/2;
    w = elm.offsetWidth/zoomRate/2;
    var x = event.x-elm.offsetLeft;
    x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
    document.getElementById('zoomImg'+n).style.marginLeft=(w-x)*zoomRate;
    var y = event.y-elm.offsetTop;
    y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
    document.getElementById('zoomImg'+n).style.marginTop=(h-y)*zoomRate;
    }
    </script>帮你改进了后面的代码，JS写在外面，每个IMG的ID都不一样
      

  20.   


    function zoom(n)
    {
    srcImg.height = srcImg.height/2;
    改为
    function zoom(n)
    {
    document.getElementById('srcImg'+n).height = document.getElementById('srcImg'+n).height/2;之前没看到这个
      

  21.   

    善意的提醒是好的，不过要先弄清楚FormView 
      

  22.   

    还是不行 用<%= "src"%>的方法 目前为止没出来过图片
      

  23.   

    还有 src的引号肯定不能加 加了是字符串了 这样图片的地址就是src三个字 哈哈哈
      

  24.   

    我懂了 现在出现这样的情况 我两张图片 一张绑定WATCHIMAGE 一张绑定 SRC 只出来一张图片如果两张都绑定SRC 当然是不加引号的 也只出来一张图片 
    但是这两种情况 我放入火狐中 竟然出现了一大一小两张图片 但是没有JS效果 请指教IE里是不是因为尺寸问题 那张大的图没显示
      

  25.   

    你现在生成的html 是怎样的
      

  26.   

    srcImg是IE的写法，FF要用document.getElementById('srcImg')
      

  27.   

    我将WatchImage字段开头的~/去掉 第一个img终于可以显示图片 但是JS效果出不来
      

  28.   

    第二个img也可以显示了 并且通过STYLE可以控制大小 JS代码的作用荡然无存 55555
      

  29.   

    现已得出一个精确的情况 我在可以实现功能的页面中 将style="overflow:hidden"删去 就出现了类似我问题也面出现的问题