fram.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<script language=javascript>
function forbiddenclick() { //函数功能，如果当前点击右键，返回false
if (event.button==2)
{
return false;
}
}
document.onmousedown=forbiddenclick;//禁止右键
document.onselectstart=returnFalse; //禁止文档选择
function returnFalse() { return false; }
document.oncontextmenu=new Function("event.returnValue=false;");//禁止右键动作
</script>
</head>
<body leftmargin="0" topmargin="0">
<iframe id=main border=0 frameborder="0" src="index.htm" width="490" height="400" scrolling="no" name="aa">
</iframe>
</body>
</html>
index.htm:
<html>
<title>smooth2</title>
<head>
<SCRIPT language=JavaScript1.2>
<!--
document.onselectstart=returnFalse;
function returnFalse() { return false; }
document.oncontextmenu=new Function("event.returnValue=false;");
var ie=document.all
var ns6=document.getElementById&&!document.all
///////控制层的拖动
var xN,yN; //设置了层的规格
var picWidth=2600; //整个大图的宽度2592
var picHeight = 2000; //整个大图的高度1944
var viewWidth = 490;
var viewHeight = 400; //定义了浏览框的尺寸
var sX,sY,sZ //这里是一个mission的全局控制量，浏览视窗相对大图所在的位置,以左上为基准
var fX,fY //用来记录载入图片的索引
var dragapproved=false
var z,x,y
var temp1,temp2
function definePosition(diva,divX,divY){ //根据层被拖动后的位置，调整层的定位，以及决定是否需要重载图片
sX -= parseInt(divX,10)-temp1;
sY -= parseInt(divY,10)-temp2;
var re = true;
if(divX>0)
{
diva.style.left = divX - (Math.floor(divX/200)+1)*200;
fX -= Math.floor(divX/200)+1;
//diva.style.left = divX - (Math.floor(divX/200)+((divX%200==0)?0:1))*200;
//fX -= Math.floor(divX/200)+((divX%200==0)?0:1);
re = false;
}
else if(divX<viewWidth-200*xN)
{
diva.style.left = divX + (Math.floor((viewWidth-200*xN-divX)/200)+1)*200;
fX += Math.floor((viewWidth-200*xN-divX)/200)+1;
//diva.style.left = divX + (Math.floor((viewWidth-200*xN-divX)/200)+((viewWidth-200*xN-divX)%200==0?0:1))*200;
//fX += Math.floor((viewWidth-200*xN-divX)/200)+((viewWidth-200*xN-divX)%200==0?0:1);
re = false;
}
if(divY>0)
{
diva.style.top = divY - (Math.floor(divY/200)+1)*200;
fY -= Math.floor(divY/200)+1;
//diva.style.top = divY - (Math.floor(divY/200)+((divY%200==0)?0:1))*200;
//fY -= Math.floor(divY/200)+((divY%200==0)?0:1);
re = false;
}
else if(divY<viewHeight-200*yN)
{
diva.style.top = divY + (Math.floor((viewHeight-200*yN-divY)/200)+1)*200;
fY += Math.floor((viewHeight-200*yN-divY)/200)+1;
//diva.style.top = divY + (Math.floor((viewHeight-200*yN-divY)/200)+((viewHeight-200*yN-divY)%200==0?0:1))*200;
//fY +=Math.floor((viewHeight-200*yN-divY)/200)+((viewHeight-200*yN-divY)%200==0?0:1);
re = false;
}
return re;
}
function drags(eventObject){
if(eventObject.button==1&&eventObject.srcElement.tagName.toString()=="IMG"){
temp1=parseInt(moveDiva.style.left,10);
temp2=parseInt(moveDiva.style.top,10);
x=parseInt(eventObject.clientX,10);
y=parseInt(eventObject.clientY,10);
dragapproved = true;
moveDiva.setCapture();
}
return false;
}
function divaMouseup(eventObject){
if(eventObject.button==1&&dragapproved)
{
dragapproved=false;
moveDiva.releaseCapture();
checkOutYN();
if(!definePosition(moveDiva,parseInt(moveDiva.style.left,10),parseInt(moveDiva.style.top,10)))reloadPic(fX,fY);
}
return;
}
function divaMove(eventObject){
if(dragapproved &&eventObject.button==1)
{
moveDiva.style.left=temp1+parseInt(eventObject.clientX,10)-x;
moveDiva.style.top=temp2+parseInt(eventObject.clientY,10)-y;
}
return;
}
function checkOutYN(){
var changedX = sX-parseInt(moveDiva.style.left,10)+temp1;
var changedY = sY-parseInt(moveDiva.style.top,10)+temp2;
if(changedX<=0)
{
moveDiva.style.left = temp1+sX;
}
else if(changedX>=picWidth-viewWidth)
{
moveDiva.style.left =temp1-(picWidth-viewWidth-sX);
}
if(changedY<=0)
{
moveDiva.style.top = temp2+sY;
}
else if(changedY>=picHeight-viewHeight)
{
moveDiva.style.top=temp2-(picHeight-viewHeight-sY);
}
return true;
}
//-->
function reloadPic(formatX,formatY){ //当确定需要重载图片后,进行载入图片
for(i=1;i<=yN;i++)
{
for(j=1;j<=xN;j++)
{
document.getElementById("pic"+i+"_"+j).src = "images/"+(fY+i).toString()+"_"+(fX+j).toString()+".jpg";
}
}
}
function loadPic(sessionX,sessionY,sessionZ){ //此函数用于根据当前层的位置,载入相应的图片divX、divY表示层的当前位置
//divZ表示当前所处的放大倍数，xNum和yNum则显示了当前层需要载入图片的规格
var startX = Math.floor(sessionX/200);
fX = startX;
var startY = Math.floor(sessionY/200);
fY = startY;
for(i=1;i<=yN;i++)
{
for(j=1;j<=xN;j++)
{
document.getElementById("pic"+i+"_"+j).src = "images/"+(startY+i).toString()+"_"+(startX+j).toString()+".jpg";
}
}
}
function initialization(sessionX,sessionY,xNum,yNum){ //初始化元素，xNum和yNum指定了载入图片的数量
var iniStr = "<table border=\"0\" width=\"100%\" id=\"table1\" cellspacing=\"0\" cellpadding=\"0\" onselect=\"return false;\">";
for(i=1;i<=yNum;i++)
{
iniStr += "<tr>";
for(j=1;j<=xNum;j++)
{
iniStr += "<td width=\"200\" height=\"200\">";
iniStr += "<img id=\"pic"+i+"_"+j+"\" width=\"100%\" height=\"100%\" onerror=\"this.src='images/spacer.gif'\">";
iniStr += "</td>";
}
iniStr += "</tr>";
}
iniStr += "</table>";
document.getElementById("moveDiva").style.width = 200*xNum;
document.getElementById("moveDiva").style.height = 200*yNum;
document.getElementById("moveDiva").innerHTML = iniStr;
xN = xNum;
yN = yNum;
sX = sessionX;
sY = sessionY;
moveDiva.style.left = -sX%200;
moveDiva.style.top = -sY%200;
loadPic(sessionX,sessionY,1);
}
//-->
</SCRIPT>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#FFFFCC">
<div id="moveDiva" onmousedown="drags(event)" onmousemove="divaMove(event)" onmouseup="divaMouseup(event)" style=" LEFT:0px; POSITION:absolute; TOP:0px;background:#cc0000; Z-INDEX:1">
loading HTML...
</div>
<!--div id="test" style="position:absolute;left:900;top:0"></div-->
</body>
</html>
<script language="javascript">
initialization(1640,850,4,4);
</script>
