<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<TITLE>JS Web page Picture Viewer-can control the image zoom in and zoom out to restore mobile effects </title>
<meta http-equiv= "Imagetoolbar" content= "no" >
<style type= "Text/css" >
Body {font-family: "Verdana", "Arial", "Helvetica", "Sans-serif"; font-size:12px; line-height:180%;}
TD {Font-size:12px; line-height:150%;}
</style>
<script language=javascript>
Drag = 0
move = 0
Dragging objects
See also: Http://blog.sina.com.cn/u/4702ecbe010007pe
var Ie=document.all;
var nn6=document.getelementbyid&&!document.all;
var Isdrag=false;
var y,x;
var odragobj;
function Movemouse (e) {
if (Isdrag) {
ODragObj.style.top = (nn6? nty + e.clienty-y: Nty + event.clienty-y) + "px";
ODragObj.style.left = (nn6? NTX + e.clientx-x: NTX + event.clientx-x) + "px";
return false;
}
}
Function Initdrag (e) {
var odraghandle = nn6? e.target:event.srcelement;
var topelement = "HTML";
while (odraghandle.tagname! = topelement && Odraghandle.classname! = "Dragable") {
Odraghandle = nn6? oDr AgHandle.parentNode:oDragHandle.parentElement;
}
if (odraghandle.classname== "dragable") {
Isdrag = true;
Odragobj = Odraghandle;
Nty = parseint (odragobj.style.top+0);
y = nn6? e.clienty:event.clienty;
NTX = parseint (odragobj.style.left+0);
x = nn6? e.clientx:event.clientx;
Document.onmousemove=movemouse;
return false;
}
}
Document.onmousedown=initdrag;
Document.onmouseup=new Function ("Isdrag=false");
function Clickmove (s) {
if (s== "up") {
DragObj.style.top = parseint (dragObj.style.top) + 100;
}else if (s== "down") {
DragObj.style.top = parseint (dragObj.style.top)-100;
}else if (s== "left") {
DragObj.style.left = parseint (dragObj.style.left) + 100;
}else if (s== "right") {
DragObj.style.left = parseint (dragObj.style.left)-100;
}
}
function Smallit () {
var height1=images1.height;
var width1=images1.width;
images1.height=height1/1.2;
images1.width=width1/1.2;
}
function Bigit () {
var height1=images1.height;
var width1=images1.width;
images1.height=height1*1.2;
images1.width=width1*1.2;
}
function Realsize ()
{
Images1.height=images2.height;
Images1.width=images2.width;
Block1.style.left = 0;
block1.style.top = 0;
}
function Featsize ()
{
var width1=images2.width;
var height1=images2.height;
var width2=360;
var height2=200;
var h=height1/height2;
var w=width1/width2;
if (height1{
images1.height=height1;
Images1.width=width1;
}
Else
{
if (h>w)
{
Images1.height=height2;
images1.width=width1*height2/height1;
}
Else
{
Images1.width=width2;
Images1.height=height1*width2/width1;
}
}
Block1.style.left = 0;
block1.style.top = 0;
}
</SCRIPT>
<script language= "JavaScript" type= "Text/javascript" >
<!--
function Mm_reloadpage (init) {//reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appname== "Netscape") && (parseint (appversion) ==4)) {
Document. Mm_pgw=innerwidth; Document. Mm_pgh=innerheight; Onresize=mm_reloadpage; }}
else if (innerwidth!=document. MM_PGW | | Innerheight!=document. MM_PGH) location.reload ();
}
Mm_reloadpage (TRUE);
-
</script>
<style type= "Text/css" >
<!--
TD, a {font-size:12px; color: #000000}
#Layer1 {position:absolute; z-index:100; top:10px;}
#Layer2 {position:absolute; z-index:1;}
-
</style>
<body leftmargin= "0" topmargin= "0" marginwidth= "0" marginheight= "0" oncontextmenu= "return false" ondragstart= " return false "Onselectstart =" return false "onselect=" Document.selection.empty () "oncopy=" Document.selection.empty () "Onbeforecopy=" return false "onmouseup=" Document.selection.empty () "style=" Overflow-y:hidden;overflow-x:hidden; " >
<div id= "Layer1" >
<table border= "0" cellspacing= "2" cellpadding= "0" >
<tr>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
</tr>
</table>
</div>
<p>
<div id= ' hiddenpic ' style= ' position:absolute; left:0px; top:0px; width:0px; height:0px; Z-index:1; Visibility:hidden; ' ></div>
<div id= ' block1 ' onmouseout= ' drag=0 ' onmouseover= ' dragobj=block1; drag=1; ' style= ' z-index:10; height:0; left:0px; Position:absolute; top:0px; width:0 ' class= "dragable" > </div>
</body>
JS Picture Viewer