<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS网页图片查看器－可控制图片放大缩小还原移动效果</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
// 拖拽对象
// 参见：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 ? oDragHandle.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<height2&&width1<width2)
{
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>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init();" 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><img src="/images/map/up.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('up')" title="向上"></td>
<td> </td>
</tr>
<tr>
<td><img src="/images/map/left.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('left')" title="向左"></td>
<td><img src="/images/map/zoom.gif" width="20" height="20" style="cursor:hand" onClick="realsize();" title="还原"></td>
<td><img src="/images/map/right.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('right')" title="向右"></td>
</tr>
<tr>
<td> </td>
<td><img src="/images/map/down.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('down')" title="向下"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><img src="/images/map/zoom_in.gif" width="20" height="20" style="cursor:hand" onClick="bigit();" title="放大"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><img src="/images/map/zoom_out.gif" width="20" height="20" style="cursor:hand" onClick="smallit();" title="缩小"></td>
<td> </td>
</tr>
</table>
</div>
<p><br>
<div id='hiddenPic' style='position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:1; visibility: hidden;'><img name='images2' src='/UploadFile/760-480bsx.jpg' border='0'></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"> <img name='images1' src='/UploadFile/760-480bsx.jpg' border='0'></div>
</body>
</html>
页面表现形式与布局格式==相关html页面
需积分: 0 195 浏览量
2009-08-28
15:20:55
上传
评论
收藏 901KB RAR 举报
页面表现形式与布局格式==相关html页面 （109个子文件） 
fantasy.css 28KB fantasys.css 6KB base.css 666B common.css 600B Thumbs.db 60KB Thumbs.db 33KB Thumbs.db 33KB Thumbs.db 33KB Thumbs.db 8KB Thumbs.db 8KB Thumbs.db 8KB Thumbs.db 6KB
img05.gif 20KB img01.gif 20KB img06.gif 20KB img04.gif 20KB img03.gif 18KB img02.gif 17KB img_01.gif 13KB pconline_page.gif 5KB img00.gif 2KB pushtt.gif 2KB btn06.gif 1KB daxing.gif 1021B daxing.gif 1021B banxing.gif 1015B banxing.gif 1015B touxing.gif 581B touxing.gif 581B zoom.gif 304B zoom_in.gif 304B left.gif 303B right.gif 301B down.gif 299B zoom_out.gif 295B up.gif 294B icon10.gif 132B icon10.gif 132B icon09.gif 131B icon09.gif 131B icon11.gif 127B icon11.gif 127B rn01.gif 126B rn01.gif 126B rn02.gif 122B rn02.gif 122B line.gif 86B rn03.gif 83B rn03.gif 83B ckline.gif 62B ckline.gif 62B li03.gif 52B li_01.gif 50B hotnav.gif 50B li02.gif 50B li01.gif 50B hotnav.gif 50B line.gif 49B
li_img_title.html 7KB input type=file后面浏览按钮的样式控制.html 5KB 滑动门通用JS特效（tab选项卡效果）.html 5KB 图片+标题+内容形式.html 5KB div+css+table.html 3KB 标题+时间+其他形式.html 3KB 分页样式.html 2KB DIV层被Flash或表单遮盖的解决方法.html 2KB LI_li01_pic.html 2KB iframe自适应.html 2KB LI common.html 1KB 设置层的透明度.html 584B
1245371023317.jpg 130KB 760-480bsx.jpg 108KB bg.jpg 74KB hop.jpg 50KB banner1.jpg 43KB cover01.jpg 31KB cartoon1.jpg 31KB bg1.jpg 28KB cover03.jpg 27KB cover03.jpg 27KB cover01.jpg 26KB cover01.jpg 26KB cover02.jpg 26KB cover02.jpg 26KB cover02.jpg 24KB upl.jpg 23KB bg2.jpg 15KB hotcur2.jpg 12KB cover03.jpg 11KB ckb.jpg 6KB ckb.jpg 6KB cka.jpg 6KB cka.jpg 6KB ckc.jpg 5KB ckc.jpg 5KB ckan.jpg 461B ckan.jpg 461B ckbn.jpg 434B ckbn.jpg 434B recentcur.jpg 380B共 109 条
- 1
- 2
评论0