问题描述
<html><body><scriptlanguage="JavaScript"><!--varsmallX=150;//缩略图宽度varbigX=800;//预览窗大小,可以任意设置varbigY=568;varsrcX=-1;//原图大小,可以任意设置.如有一个为-1将使用图片原始大小varsrcY=-1;varborder=1;//边框varsmallY,viewX,viewY,bl,isIE,vX,vY,imgo;window.onload=function(){//初始化数据isIE=window.event?1:0;//由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异if(srcX==-1||srcY==-1){srcX=bigpic.width;srcY=bigpic.height;}//如果有一个为-1,则使用原图大小else{bigpic.width=srcX;bigpic.height=srcY;}smallY=srcY*smallX/srcX;//按比例计算出缩略图的高viewX=bigX/srcX*smallX;//计算缩略图的预览窗口大小viewY=bigY/srcY*smallY;bl=srcX/smallX;//得到缩放比例bigbox.style.borderWidth=border;//初始化预览窗bigbox.style.width=bigX+border*2*isIE;bigbox.style.height=bigY+border*2*isIE;view.style.borderWidth=border;//初始化小预览窗view.style.width=viewX-!isIE*border*2;view.style.height=viewY-!isIE*border*2;loading.style.left=bigX/2+bigbox.offsetLeft*!isIE-loading.offsetWidth/2;//初始化loadingloading.style.top=bigY/2+bigbox.offsetTop*!isIE-loading.offsetHeight/2;varimga=document.body.getElementsByTagName("img")//初始化所有缩略图for(m=0;m<imga.length;m++)if(imga[m].className=="smallpic"){imga[m].style.borderWidth=border;imga[m].width=smallX;imga[m].height=smallY;imga[m].onmouseout=function(){if(isIE)view.style.display='none'}}}functionmove(e,o){if(imgo!=o){//如果切换图片bigpic.style.display='none';bigpic.src=o.lowsrc;//载入新图片imgo=o;//imgo作为标记,避免重复载入相同图片}else{vare=window.event?window.event:e;//得到IE或FF的eventif(!isIE){vX=e.pageX-border-o.offsetLeft;vY=e.pageY-border-o.offsetTop}else{vX=e.offsetX;vY=e.offsetY}//分别在FF与IE下获得相对坐标vX+=-viewX/2;vY+=-viewY/2;//得到缩略图的预览窗位置if(vX<0)vX=0;//边界判断,不能超出缩略图的范围if(vY<0)vY=0;if(vX>smallX-viewX)vX=smallX-viewX;if(vY>smallY-viewY)vY=smallY-viewY;bigpic.style.marginLeft=-vX*bl;//刷新预览窗口bigpic.style.marginTop=-vY*bl;view.style.display='block';//刷新缩略图中预览窗口view.style.left=vX+o.offsetLeft+border;view.style.top=vY+o.offsetTop+border;}}//--></script><styletype="text/css"><!--*{padding:0;margin:0}body{background:black}.smallpic{display:block;border:greendotted;float:left}#bigbox{border:greensolid;width:800px;height:568px;overflow:hidden;font-size:0px;float:left;}#view{border:silversolid;width:0;height:0;font-size:0px;display:none;position:absolute;}#loading{position:absolute;z-index:-1;font-size:20px;font-weight:bold;color:white;}#loadingimg{vertical-align:middle}//--></style><divid="bigbox"><imgid="bigpic"src="http://www.whoj.net/images//b1.jpg"border="0"onload="this.style.display='block'"><divid="loading"><imgsrc="http://www.whoj.net/images/loading.gif"border="0">Loading...</div></div><!--预览窗//--><divid="view"onmousemove="if(!isIE)move(event,imgo)"onmouseout="if(!isIE)view.style.display='none'"></div><!--小预览窗//--><imgclass="smallpic"onmousemove="move(event,this)"lowsrc="http://www.whoj.net/images/b1.jpg"src="http://www.whoj.net/images/s1.jpg"><!--缩略图,lowsrc大图,src小图//--><imgclass="smallpic"onmousemove="move(event,this)"lowsrc="http://www.whoj.net/images/b2.jpg"src="http://www.whoj.net/images/s2.jpg"><imgclass="smallpic"onmousemove="move(event,this)"lowsrc="http://www.whoj.net/images/b3.jpg"src="http://www.whoj.net/images/s3.jpg"><imgclass="smallpic"onmousemove="move(event,this)"lowsrc="http://www.whoj.net/images/b4.jpg"src="http://www.whoj.net/images/s4.jpg"><imgclass="smallpic"onmousemove="move(event,this)"lowsrc="http://www.whoj.net/images/b5.jpg"src="http://www.whoj.net/images/s5.jpg"></body></html>
解决方案
解决方案二:
请大家帮忙查看一下。上面那个页面在aspx为什么不有正常运行?ie6或firefox
解决方案三:
.
解决方案四:
帮顶了。!
解决方案五:
太长代码了~~~~
解决方案六:
晕保存成htm报个编码有问题硬保存下打开JS没报错
解决方案七:
那位可以调试出来?
解决方案八:
LZ代码太长了,况且还没有调试的环境,自己慢慢来调试,我们调试比我们写javascript都痛苦~
解决方案九:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headid="Head1"runat="server"><title>无标题页</title><styletype="text/css">*{padding:0;margin:0}body{background:black}.smallpic{display:block;border:greendotted;float:left}#bigbox{border:greensolid;width:800px;height:568px;overflow:hidden;font-size:0px;float:left;}#view{border:silversolid;width:0;height:0;font-size:0px;display:none;position:absolute;}#loading{position:absolute;z-index:-1;font-size:20px;font-weight:bold;color:white;}#loadingimg{vertical-align:middle}</style></head><body><formid="form1"runat="server"><divid="bigbox"><imgid="bigpic"src="http://www.whoj.net/images//b1.jpg"border="0"onload="this.style.display='block'"/><divid="loading"><imgalt=""src="http://www.whoj.net/images/loading.gif"border="0"/>Loading...</div></div><!--预览窗//--><divid="view"onmousemove="if(!isIE)move(event,document.getElementById('bigpic'));"onmouseout="if(!isIE)view.style.display=''"></div><!--小预览窗//--><imgid="image1"alt=""class="smallpic"lowsrc="http://www.whoj.net/images/b1.jpg"onmousemove="move(event,document.getElementById('image1'));"src="http://www.whoj.net/images/s1.jpg"/><!--缩略图,lowsrc大图,src小图//--><imgid="image2"alt=""class="smallpic"lowsrc="http://www.whoj.net/images/b2.jpg"onmousemove="move(event,this)"src="http://www.whoj.net/images/s2.jpg"/><imgid="image3"alt=""class="smallpic"lowsrc="http://www.whoj.net/images/b3.jpg"onmousemove="move(event,this)"src="http://www.whoj.net/images/s3.jpg"/><imgid="image4"alt=""class="smallpic"lowsrc="http://www.whoj.net/images/b4.jpg"onmousemove="move(event,this)"src="http://www.whoj.net/images/s4.jpg"/><imgid="image5"alt=""class="smallpic"lowsrc="http://www.whoj.net/images/b5.jpg"onmousemove="move(event,this)"src="http://www.whoj.net/images/s5.jpg"/><scriptlanguage="javascript"type="text/javascript"><!--//--></script><scriptlanguage="JavaScript"type="text/javascript"><!--varbigpic=document.getElementById("bigpic");varview=document.getElementById("view");varimgo=document.getElementById("bigpic");varsmallX=150;//缩略图宽度varbigX=800;//预览窗大小,可以任意设置varbigY=568;varsrcX=-1;//原图大小,可以任意设置.如有一个为-1将使用图片原始大小varsrcY=-1;varborder=1;//边框varsmallY,viewX,viewY,bl,isIE,vX,vY;window.onload=function(){//初始化数据isIE=window.event?1:0;//由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异if(srcX==-1||srcY==-1){srcX=bigpic.width;srcY=bigpic.height;}//如果有一个为-1,则使用原图大小else{bigpic.width=srcX;bigpic.height=srcY;}smallY=srcY*smallX/srcX;//按比例计算出缩略图的高viewX=bigX/srcX*smallX;//计算缩略图的预览窗口大小viewY=bigY/srcY*smallY;bl=srcX/smallX;//得到缩放比例bigbox.style.borderWidth=border;//初始化预览窗bigbox.style.width=bigX+border*2*isIE;bigbox.style.height=bigY+border*2*isIE;view.style.borderWidth=border;//初始化小预览窗view.style.width=viewX-!isIE*border*2;view.style.height=viewY-!isIE*border*2;loading.style.left=bigX/2+bigbox.offsetLeft*!isIE-loading.offsetWidth/2;//初始化loadingloading.style.top=bigY/2+bigbox.offsetTop*!isIE-loading.offsetHeight/2;varimga=document.body.getElementsByTagName("img")//初始化所有缩略图for(m=0;m<imga.length;m++)if(imga[m].className=="smallpic"){imga[m].style.borderWidth=border;imga[m].width=smallX;imga[m].height=smallY;imga[m].onmouseout=function(){if(isIE){view.style.display='none';}else{view.style.display='';}}}}functionmove(e,o){if(imgo!=o){//如果切换图片bigpic.style.display='none';bigpic.src=o.lowsrc;//载入新图片imgo=o;//imgo作为标记,避免重复载入相同图片}else{vare=window.event?window.event:e;//得到IE或FF的eventif(!isIE){vX=e.pageX-border-o.offsetLeft;vY=e.pageY-border-o.offsetTop}else{vX=e.offsetX;vY=e.offsetY}//分别在FF与IE下获得相对坐标vX+=-viewX/2;vY+=-viewY/2;//得到缩略图的预览窗位置if(vX<0)vX=0;//边界判断,不能超出缩略图的范围if(vY<0)vY=0;if(vX>smallX-viewX)vX=smallX-viewX;if(vY>smallY-viewY)vY=smallY-viewY;bigpic.style.marginLeft=-vX*bl;//刷新预览窗口bigpic.style.marginTop=-vY*bl;if(isIE){view.style.display='block';//刷新缩略图中预览窗口view.style.left=vX+o.offsetLeft+border;view.style.top=vY+o.offsetTop+border;}else{view.style.display='';view.style.position="absolute";view.style.left="1000px";//vX+o.offsetLeft+border+'px';view.style.top="1000px";//vY+o.offsetTop+border+'px';}}}//--></script></form></body></html>在ie7里面能运行.但是在firefox或者ie6就不行.
解决方案十:
兼容问题,首先应该了解firefox所支持的属性和方法打开aspx后复制地址到firefox按扎firefox的firebug脚本调试插件根据说明步逐逐步打开firebug再firebug里的script内设置段点跟C#设置段点一样F11进行逐步调试`~