asp.net c# 如何在aspx中局部放大一张图片？

我有html的局部放大图片的代码 
可是放到aspx里就报错了 
要怎么改才能让html的和js的代码在aspx中也能用呢 html局部放大图片的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
原图：<BR>
<img src="http://reimg.360quan.com/400/300/album/album.static.360quan.com/019/731/51/200711091844017907.jpg" onmousemove='zoom()' id=srcImg>
<BR>
局部放大图：<BR>
<div style='overflow:hidden'><img id=zoomImg></div><script language="javascript" type="text/javascript">
<!--
zoomImg.src = srcImg.src;
srcImg.height = srcImg.height;
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>
</html>

解决方案 »

  1.   

    aspx和html不是一样吗？你确定是这里报错？
      

  2.   

    放在aspx里的代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %><!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>无标题页</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <BR>
    原图：<BR>
    <img src="http://reimg.360quan.com/400/300/album/album.static.360quan.com/019/731/51/200711091844017907.jpg" onmousemove='zoom()' id=srcImg>
    <BR>
    局部放大图：<BR>
    <div style='overflow:hidden'><img id=zoomImg></div><script language="javascript" type="text/javascript">
    <!--
    zoomImg.src = srcImg.src;
    srcImg.height = srcImg.height;
    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>    </div>
        </form>
    </body>
    </html>报zoomImg未定义错误
      

  3.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WebApplication1.test" %><!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>无标题页</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <BR>
    原图：<BR>
    <img src="http://reimg.360quan.com/400/300/album/album.static.360quan.com/019/731/51/200711091844017907.jpg" onmousemove='zoom()' id="srcImg">
    <BR>
    局部放大图：<BR>
    <div style='overflow:hidden'><img id="zoomImg" width="300" height="300"></div><script language="javascript" type="text/javascript">
    <!--
    document.all.zoomImg.src = document.all.srcImg.src;
    document.all.srcImg.height = document.all.srcImg.height;
    var zoomRate = 5;
    document.all.zoomImg.height = document.all.srcImg.height*zoomRate;
    document.all.zoomImg.parentNode.style.width = document.all.srcImg.width;
    document.all.zoomImg.parentNode.style.height = document.all.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>
        </div>
        </form>
    </body>
    </html>
      

  4.   

    document.all楼主还是端正一下态度为好.
      

  5.   

    zoomImg.src = srcImg.src;
     你没获取zoomImg 当然就是没定义啊  在这上面加上 
    var zoomImg=document.getElementById("zoomImg");
    var srcImg=document.getElementById("srcImg");
      

  6.   

    函数里的zoomImg前也要加document.all
      

  7.   

    函数里的zoomImg前也要加document.all