拖动图片+放大缩小
A:实现拖动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body {CURSOR: url('images/hmove.cur')}
</style>
<SCRIPT language=JavaScript>
drag = 0
move = 0
function init() {
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(dragObj.style.left)
clicktop = window.event.y - parseInt(dragObj.style.top)
dragObj.style.zIndex += 1
move = 1
}
}
function mouseStop() {
window.event.returnValue = false
}
function mouseMove() {
if (move) {
dragObj.style.left = window.event.x - clickleft
dragObj.style.top = window.event.y - clicktop
}
}
function mouseUp() {
move = 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>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init()" onmouseup="document.selection.empty()">
<div id='hiddenPic' style='position:absolute; left:433px; top:258px; width:77px; height:91px; z-index:1; visibility: hidden;'><img name='images2' src='http://www.zzupb.gov.cn/UploadPhotos/20070730hczxck.jpg' border='0'></div><div id='block1' onmouseout='drag=0' onmouseover='dragObj=block1; drag=1;' style='z-index:10; height: 60; left: 0; position: absolute; top: 0; width: 120'><dd><img name='images1' src='http://www.zzupb.gov.cn/UploadPhotos/20070730hczxck.jpg' border='0'></dd></div>
</body>
</html>
B:实现缩放
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language=JavaScript>
function smallit(){
var height1=PhotoViewer.images1.height;
var width1=PhotoViewer.images1.width;
PhotoViewer.images1.height=height1/1.2;
PhotoViewer.images1.width=width1/1.2;
}
function bigit(){
var height1=PhotoViewer.images1.height;
var width1=PhotoViewer.images1.width;
PhotoViewer.images1.height=height1*1.2;
PhotoViewer.images1.width=width1*1.2;
}
function fullit()
{
var width_s=screen.width-10;
var height_s=screen.height-30;
window.open("Photo_View.asp?UrlID=1&PhotoID=21", "PhotoView", "width="+width_s+",height="+height_s+",left=0,top=0,location=no,toolbar=no,status=no,resizable=no,scrollbars=yes,menubar=no,directories=no");
}
function realsize()
{
PhotoViewer.images1.height=PhotoViewer.images2.height;
PhotoViewer.images1.width=PhotoViewer.images2.width;
PhotoViewer.block1.style.left = 0;
PhotoViewer.block1.style.top = 0;
}
function featsize()
{
var width1=PhotoViewer.images2.width;
var height1=PhotoViewer.images2.height;
var width2=760;
var height2=500;
var h=height1/height2;
var w=width1/width2;
if(height1<height2&&width1<width2)
{
PhotoViewer.images1.height=height1;
PhotoViewer.images1.width=width1;
}
else
{
if(h>w)
{
PhotoViewer.images1.height=height2;
PhotoViewer.images1.width=width1*height2/height1;
}
else
{
PhotoViewer.images1.width=width2;
PhotoViewer.images1.height=height1*width2/width1;
}
}
PhotoViewer.block1.style.left = 0;
PhotoViewer.block1.style.top = 0;
}
</script>
</head>
<body leftmargin=0 topmargin=0 >
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" class="border2">
<tr>
<td height="40" align="center"><strong><font size="4">郑州国家干线公路物流港规划方案</font></strong></td>
</tr>
<tr>
<td height="30" align="center" valign="middle" class="tdbg_leftall"><input name="smallit" type="button" id="smallit" onClick="smallit();" value="- 缩小 -">
<input name="bigit" type="button" id="bigit" onClick="bigit();" value="+ 放大 +">
<input name="fullit" type="button" id="fullit" value="全屏显示" onClick="fullit();">
<input name="realsize" type="button" id="realsize" value="实际大小" onClick="realsize();">
<input name="featsize" type="button" id="featsize" value="最合适大小" onClick="featsize();"></td>
</tr>
<tr>
<td height="500" align="center" valign="middle" class="tdbg_leftall"><iframe id='PhotoViewer' width='99%' height='500' scrolling='no' src='拷贝于 拷贝于 Admin_Index_Main.asp'></iframe></td>
</tr>
<tr>
<td height="30" align="center" valign="middle" class="tdbg_leftall"><input name="smallit" type="button" id="smallit" onClick="smallit();" value="- 缩小 -">
<input name="bigit" type="button" id="bigit" onClick="bigit();" value="+ 放大 +">
<input name="fullit" type="button" id="fullit" value="全屏显示" onClick="fullit();">
<input name="realsize" type="button" id="realsize" value="实际大小" onClick="realsize();">
<input name="featsize" type="button" id="featsize" value="最合适大小" onClick="featsize();"></td>
</tr>
</table>
</body>
</html>
---------------------------------屏幕变灰-------------------------------------------
function Button1_onclick()
{
var objScreen = document.createElement("div");
objScreen.id="obj_bg_Screen";
var oS=objScreen.style;
oS.top = oS.left = oS.margin = oS.padding = "0px";
oS.width = document.body.scrollWidth;
oS.height = document.body.scrollHeight;
oS.position = "absolute";
oS.zIndex = "9999";
oS.background = "gray";
//oS.backgroundImage = "url("+MaskBackgroundImage+")";
oS.filter = "alpha(opacity=40)";
oS.opacity = 40/100;
oS.MozOpacity = 40/100;
document.body.appendChild(objScreen);
//setDiv();
}
---------------------------------------------------------------------
