js问题

liaoqihua 2008-05-10 04:20:37
<html>
<body>
<script language="JavaScript">
<!--
var smallX = 150; //缩略图宽度
var bigX = 800; //预览窗大小,可以任意设置
var bigY = 568;
var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小
var srcY = -1;
var border = 1; //边框
var smallY,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; //初始化loading
loading.style.top=bigY/2+bigbox.offsetTop*!isIE-loading.offsetHeight/2;
var imga=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'}
}
}
function move(e,o){
if (imgo!=o){ //如果切换图片
bigpic.style.display = 'none';
bigpic.src=o.lowsrc; //载入新图片
imgo=o; //imgo作为标记,避免重复载入相同图片
}else{
var e = window.event?window.event:e; //得到IE或FF的event
if (!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>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{background:black}
.smallpic{display:block;border:green dotted;float:left}
#bigbox{border:green solid;width:800px;height:568px;overflow:hidden;font-size:0px;float:left;}
#view{border:silver solid;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;}
#loading img{vertical-align:middle}
//-->
</style>
<div id="bigbox"><img id="bigpic" src="http://www.whoj.net/images//b1.jpg" border="0" onload="this.style.display = 'block'"><div id="loading"><img src="http://www.whoj.net/images/loading.gif" border="0"> Loading...</div></div><!--预览窗//-->
<div id="view" onmousemove="if (!isIE) move(event,imgo)" onmouseout="if (!isIE) view.style.display='none'"></div><!--小预览窗//-->
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b1.jpg" src="http://www.whoj.net/images/s1.jpg"><!--缩略图,lowsrc大图,src小图//-->
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b2.jpg" src="http://www.whoj.net/images/s2.jpg">
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b3.jpg" src="http://www.whoj.net/images/s3.jpg">
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b4.jpg" src="http://www.whoj.net/images/s4.jpg">
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b5.jpg" src="http://www.whoj.net/images/s5.jpg">


</body>
</html>
...全文
88 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
xuyiazl 2008-05-11
  • 打赏
  • 举报
 回复
兼容问题，

首先应该了解firefox所支持的属性和方法

打开aspx后 复制地址到 firefox

按扎firefox的firebug脚本调试插件

根据说明步逐逐步打开firebug

再firebug里的script内设置段点 跟 C#设置段点一样

F11进行逐步调试`~
liaoqihua 2008-05-10
  • 打赏
  • 举报
 回复
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
<title>无标题页</title>
<style type="text/css">
*{padding:0;margin:0}
body{background:black}
.smallpic{display:block;border:green dotted;float:left}
#bigbox{border:green solid;width:800px;height:568px;overflow:hidden;font-size:0px;float:left;}
#view{border:silver solid;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;}
#loading img{vertical-align:middle}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="bigbox">
<img id="bigpic" src="http://www.whoj.net/images//b1.jpg" border="0" onload="this.style.display = 'block'"/>
<div id="loading">
<img alt="" src="http://www.whoj.net/images/loading.gif" border="0"/> Loading...
</div>
</div>
<!--预览窗//-->

<div id="view" onmousemove="if (!isIE) move(event,document.getElementById('bigpic'));" onmouseout="if (!isIE) view.style.display=''"></div><!--小预览窗//-->
<img id="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小图//-->

<img id="image2" alt="" class="smallpic" lowsrc="http://www.whoj.net/images/b2.jpg" onmousemove="move(event,this)" src="http://www.whoj.net/images/s2.jpg"/>
<img id="image3" alt="" class="smallpic" lowsrc="http://www.whoj.net/images/b3.jpg" onmousemove="move(event,this)" src="http://www.whoj.net/images/s3.jpg"/>
<img id="image4" alt="" class="smallpic" lowsrc="http://www.whoj.net/images/b4.jpg" onmousemove="move(event,this)" src="http://www.whoj.net/images/s4.jpg"/>
<img id="image5" alt="" class="smallpic" lowsrc="http://www.whoj.net/images/b5.jpg" onmousemove="move(event,this)" src="http://www.whoj.net/images/s5.jpg"/>

<script language="javascript" type="text/javascript">
<!--

//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
var bigpic=document.getElementById("bigpic");
var view=document.getElementById("view");
var imgo=document.getElementById("bigpic");
var smallX = 150; //缩略图宽度
var bigX = 800; //预览窗大小,可以任意设置
var bigY = 568;
var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小
var srcY = -1;
var border = 1; //边框
var smallY,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; //初始化loading
loading.style.top=bigY/2+bigbox.offsetTop*!isIE-loading.offsetHeight/2;
var imga=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='';
}

}
}
}
function move(e,o){


if (imgo!=o){ //如果切换图片

bigpic.style.display = 'none';
bigpic.src=o.lowsrc; //载入新图片
imgo=o; //imgo作为标记,避免重复载入相同图片


}else{

var e = window.event?window.event:e; //得到IE或FF的event
if (!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就不行.
Magic_YJL 2008-05-10
  • 打赏
  • 举报
 回复
LZ 代码太长了，况且还没有调试的环境，
自己慢慢来调试，我们调试比我们写javascript都痛苦~
liaoqihua 2008-05-10
  • 打赏
  • 举报
 回复
那位可以调试出来?
kong521 2008-05-10
  • 打赏
  • 举报
 回复
晕保存成htm报个编码有问题
硬保存下打开
JS没报错
zengxie 2008-05-10
  • 打赏
  • 举报
 回复
太长代码了~~~~
tautaulee 2008-05-10
  • 打赏
  • 举报
 回复
帮顶了。！
sxlfybb 2008-05-10
  • 打赏
  • 举报
 回复




.
liaoqihua 2008-05-10
  • 打赏
  • 举报
 回复
请大家帮忙查看一下。上面那个页面在aspx为什么不有正常运行？ie6或firefox
javascript 直接调用OC 方法demo
demo 实现了 JS 直接调用OC的方法，而不是通过间接的截获 url参数来进行调用 有什么问题 请联系博主 j_akill
解决2020版IDEA的JAVAScript中找不到vue.js问题
解决2020版IDEA的JAVAScript中找不到vue.js问题 1、安装插件 打开IDEA的界面如下 步骤：(1)file——>setting——>plugins ​ (2)在搜索框搜索vue,然后vue.js——>install 新建project,在JavaScript中就...
10个非常基础的 Javascript 问题
我搜索了许多Javascript面试问题，这10个对我来说最重要。让我们深入研究一下。 1.什么是Javascript？ Javascript是一种用于Web开发的编程语言。JavaScript在网络的客户端上运行。 根据MDN，JavaScript（通常缩写为...
javascript 点击事件执行两次js问题
因为利用js在页面加载后添加需要点击事件的代码，发现在点击后会代码会执行两次，因为有toggle效果，...后面查到，off函数可以解除由on函数所绑定的事件，所以在js代码中on函数前调用下Off函数，就正常了： $("li.task
JavaScript数值计算时精度问题处理
Big.js 是一个 JavaScript 的 “任意精度” 数字库，能够处理普通数字无法表示的大数字计算。当使用 JavaScript 进行...在处理大数值时，使用 big.js 这样的高精度库可以避免 JavaScript 中 Number 类型的精度问题。
.NET社区

62,039

社区成员

669,051

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章