一段更强大的js实现放大图片的代码，还有许多其他功能如打印保存等
感谢空心菜的无私帮助
下载后把.swf去掉解压即可acd.rar.swf
<!--- THE SITE IS DESIGNED BY MYHYLI --->
<html>
<head>
<title>Acdsee Online</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<script language="JavaScript">
<!--
var width0;
var height0;
function initsize() {
width0=sample.offsetWidth;
height0=sample.offsetHeight;
recalcposition();
sample.style.visibility='visible';
}
function recalcposition()
{
if ((document.body.offsetWidth-sample.offsetWidth)/2<0) {imglayer.style.left=0;}
else {imglayer.style.left=(document.body.offsetWidth-sample.offsetWidth)/2;}
if ((document.body.offsetHeight-sample.offsetHeight)/2<0) {imglayer.style.top=0;}
else {imglayer.style.top=(document.body.offsetHeight-sample.offsetHeight)/2;}
window.scrollTo(0,0);
}
var curzoom=1;
function down() {
if (event.button==1 && zoomvalue!=1) {
curzoom*=zoomvalue;
sample.width=width0*curzoom;
recalcposition();
}
}
function showtool() {
tool.style.visibility='visible';
if (document.body.scrollLeft+event.clientX+tool.offsetWidth<document.body.offsetWidth)
tool.style.left=document.body.scrollLeft+event.clientX;
else
tool.style.left=document.body.scrollLeft+event.clientX-tool.offsetWidth;
if (document.body.scrollTop+event.clientY+tool.offsetHeight<document.body.offsetHeight)
tool.style.top=document.body.scrollTop+event.clientY;
else
tool.style.top=document.body.scrollTop+event.clientY-tool.offsetHeight;
}
var toolid=new Array;
toolid[0]='fitmode';
toolid[1]='filtermode';
toolid[2]='url';
toolid[3]='extend';
toolid[4]='home';
toolid[5]='previous';
toolid[6]='next';
toolid[7]='end';
toolid[8]='alpha1';
toolid[9]='alpha2';
toolid[10]='alpha3';
toolid[11]='blur1';
toolid[12]='blur2';
toolid[13]='light1';
toolid[14]='light2';
toolid[15]='light3';
toolid[16]='light4';
toolid[17]='wave1';
toolid[18]='wave2';
toolid[19]='wave3';
toolid[20]='favourl';
toolid[21]='importicon';
function hidetool() {
for (i=0;i<toolid.length;i++) {
if (event.srcElement.id==toolid[i]) return false;
}
tool.style.visibility='hidden';
tool.style.left=0;
tool.style.top=0;
}
var zoomvalue=2;
function zoomin() {
sample.style.cursor='url("images/zoom-in.cur")';
zoomvalue=2;
}
function zoomout() {
sample.style.cursor='url("images/zoom-out.cur")';
zoomvalue=1/2;
}
function move() {
sample.style.cursor='url("images/move-up.cur")';
zoomvalue=1;
}
var scrollcount=0;
var dragx;
var dragy;
var scrollarrowtop;
function initdrag() {
scrollcount=1;
dragx=document.body.scrollLeft+event.clientX;
dragy=document.body.scrollTop+event.clientY;
}
function startdrag() {
if (scrollcount==1 && zoomvalue==1) {
window.scrollBy(dragx-(document.body.scrollLeft+event.clientX),dragy-(document.body.scrollTop+event.clientY));
dragx=document.body.scrollLeft+event.clientX;
dragy=document.body.scrollTop+event.clientY;
}
}
function enddrag() {
scrollcount=0;
}
var scrollcount2=0;
var handledx;
var width0;
function initdrag2() {
scrollcount2=1;
handledx=document.body.scrollLeft+event.clientX-tool.offsetLeft-zoomhandle.offsetLeft;
sample.width=width0;
recalcposition();
curzoom=1;
}
function startdrag2() {
if (scrollcount2==1) {
if ((document.body.scrollLeft+event.clientX-handledx)>(73+tool.offsetLeft) && (document.body.scrollLeft+event.clientX-handledx)<(175+tool.offsetLeft)) {zoomhandle.style.left=document.body.scrollLeft+event.clientX-handledx-tool.offsetLeft;}
if ((document.body.scrollLeft+event.clientX-handledx)<(74+tool.offsetLeft)) {zoomhandle.style.left=74+tool.offsetLeft-tool.offsetLeft;}
if ((document.body.scrollLeft+event.clientX-handledx)>(174+tool.offsetLeft)) {zoomhandle.style.left=174+tool.offsetLeft-tool.offsetLeft;}
//recalc curzoom
if (zoomhandle.offsetLeft-124>-1) {
curzoom=Math.floor(((zoomhandle.offsetLeft-124)/10+1)*100)/100;
sample.width=width0*curzoom;
recalcposition();
showzoomvalue.innerHTML=Math.floor(((zoomhandle.offsetLeft-124)/10+1)*100)+'%';
}
else {
curzoom=Math.floor(((zoomhandle.offsetLeft-124)*9/500+1)*100)/100;
sample.width=width0*curzoom;
recalcposition();
showzoomvalue.innerHTML=Math.floor(((zoomhandle.offsetLeft-124)*9/500+1)*100)+'%';
}
}
}
function enddrag2() {
scrollcount2=0;
}
function autofit(selObj) {
fitcount=selObj.options[selObj.selectedIndex].value;
if (fitcount=="1") {
curzoom2=document.body.offsetWidth/width0;
curzoom=document.body.offsetHeight/height0;
if (curzoom2<curzoom) curzoom=curzoom2;
sample.width=width0*curzoom;
}
if (fitcount=="2") {sample.width=width0;curzoom=1;}
if (fitcount=="3") {
curzoom=document.body.offsetWidth/width0;
sample.width=width0*curzoom;}
if (fitcount=="4") {
curzoom=document.body.offsetHeight/height0;
sample.width=width0*curzoom;}
if (fitcount=="0") return false;
recalcposition();
selObj.selectedIndex=0;
tool.style.visibility='hidden';tool.style.left=0;tool.style.top=0;
}
function changeimg(selObj) {
if (event.keyCode==13) {
imgid=imglist.length;
for (i=0;i<imglist.length;i++) {
if (selObj.value==imglist[i]) return false;
}
imglist[imgid]=selObj.value;
showimg();
tool.style.visibility='hidden';
}
}
function showimg() {
if (imgid>-1 && imgid<imglist.length && sample.src!=imglist[imgid]) {
sample.outerHTML='<img src="'+imglist[imgid]+'" id=sample onmousedown="down();initdrag()" style="cursor:url(images/zoom-in.cur);visibility:hidden" onmousemove="startdrag()" onmouseup="enddrag()" onreadystatechange="initsize()">';
showzoomvalue.innerHTML='100%';
zoomhandle.style.left=124;
curzoom=1;
filterparam.innerHTML=' ';
}
if (imgid<0) {imgid=0;return false;}
if (imgid>imglist.length-1) {imgid=imglist.length-1;return false;}
}
function extendit() {
if (extendparam.style.display=='none') {extend.style.filter='flipv()';extendparam.style.display='block';}
else {extend.style.filter='';extendparam.style.display='none';}
}
function extendit2() {
if (slide.style.display=='none') {extend2.style.filter='flipv()';slide.style.display='block';}
else {extend2.style.filter='';slide.style.display='none';}
}
var imgid=0;
var imglist=new Array;
function addfilter(selObj) {
if (selObj.options[selObj.selectedIndex].value=='alpha(') {
filterparam.innerHTML='Opacity <input id=alpha1 type=text value=80 size=3 onkeypress="filter_alpha()" onmouseover="this.focus();this.select()"> - <input id=alpha2 type=text value=0 size=3 onkeypress="filter_alpha()" onmouseover="this.focus();this.select()"> Style <input id=alpha3 type=text value=2 size=1 onkeypress="filter_alpha()" onmouseover="this.focus();this.select()">';
sample.style.filter='alpha('+'opacity='+alpha1.value+',finishopacity='+alpha2.value+',style='+alpha3.value+')';
}
if (selObj.options[selObj.selectedIndex].value=='blur(') {
filterparam.innerHTML='Direction <input id=blur1 type=text value=45 size=3 onkeypress="filter_blur()" onmouseover="this.focus();this.select()"> Strength <input id=blur2 type=text value=5 size=3 onkeypress="filter_blur()" onmouseover="this.focus();this.select()">';
sample.style.filter='blur('+'add=0,direction='+blur1.value+',strength='+blur2.value+')';
}
if (selObj.options[selObj.selectedIndex].value=='light(') {
filterparam.innerHTML='RGB <input id=light1 type=text value=255 size=2 onkeypress="filter_light()" onmouseover="this.focus();this.select()"> <input id=light2 type=text value=0 size=2 onkeypress="filter_light()" onmouseover="this.focus();this.select()"> <input id=light3 type=text value=0 size=2 onkeypress="filter_light()" onmouseover="this.focus();this.select()"> Strength <input id=light4 type=text value=20 size=3 onkeypress="filter_light()" onmouseover="this.focus();this.select()">';
sample.style.filter='light()';
sample.filters[0].addCone(0,0,1,sample.offsetWidth,sample.offsetHeight,light1.value,light2.value,light3.value,light4.value,90);
}
if (selObj.options[selObj.selectedIndex].value=='wave(') {
filterparam.innerHTML='Phase <input id=wave1 type=text value=4 size=2 onkeypress="filter_wave()" onmouseover="this.focus();this.select()"> Freq <input id=wave2 type=text value=5 size=2 onkeypress="filter_wave()" onmouseover="this.focus();this.select()"> Strength <input id=wave3 type=text value=2 size=3 onkeypress="filter_wave()" onmouseover="this.focus();this.select()">';
sample.style.filter='wave(Add=0, Phase='+wave1.value+',Freq='+wave2.value+',LightStrength="5",Strength='+wave3.value+')';
}
if (selObj.options[selObj.selectedIndex].value=='fliph(' || selObj.options[selObj.selectedIndex].value=='flipv(' || selObj.options[selObj.selectedIndex].value=='invert(' || selObj.options[selObj.selectedIndex].value=='gray(' || selObj.options[selObj.selectedIndex].value=='xray(') {
filterparam.innerHTML=' ';
sample.style.filter=selObj.options[selObj.selectedIndex].value+')';
}
if (selObj.options[selObj.selectedIndex].value=='none') {
sample.style.filter='';
filterparam.innerHTML=' ';}
selObj.selectedIndex=0;
}
function filter_alpha() {
if (event.keyCode==13) {
sample.style.filter='alpha('+'opacity='+alpha1.value+',finishopacity='+alpha2.value+',style='+alpha3.value+')';
}
}
function filter_blur() {
if (event.keyCode==13) {
sample.style.filter='blur('+'add=0,direction='+blur1.value+',strength='+blur2.value+')';
}
}
function filter_light() {
if (event.keyCode==13) {
sample.filters[0].clear();
sample.filters[0].addCone(0,0,1,sample.offsetWidth,sample.offsetHeight,light1.value,light2.value,light3.value,light4.value,90);
}
}
function filter_wave() {
if (event.keyCode==13) {
sample.style.filter='wave(Add=0, Phase='+wave1.value+',Freq='+wave2.value+',LightStrength="5",Strength='+wave3.value+')';
}
}
function exportit() {
var newwin=window.open('','YourFavo','width=300,height=100,left=0,top=0');
var favorite='<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>span { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 10px}</style><OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT><body>';
for (i=0;i<imglist.length;i++) {
favorite+='<span id=imglist'+i+'>'+imglist[i]+'</span><br>';
}
favorite+='</body>';
newwin.document.write(favorite);
newwin.document.all.WebBrowser.ExecWB(4,1);
newwin.window.close();
}
function importit() {
filterparam.innerHTML=' Favo. URL <input id=favourl type=text size=24 onkeypress="readfavo()" onmouseover="this.focus();this.select()">';
}
function readfavo() {
if (event.keyCode==13) {
var newwin=window.open(favourl.value,'YourFavo','width=300,height=100,left=0,top=0');
for (i=0;i<newwin.document.all.tags("span").length;i++) {
imglist[i]=newwin.document.all.tags("span")[i].innerHTML;
}
newwin.window.close();
imgid=0;
tool.style.visibility='hidden';tool.style.left=0;tool.style.top=0;
}
}
// -->
</script>
<style>
.button { border:1px solid menu; behavior:url(images/button.htc);}
input,select,td { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 10px}
</style>
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
</head>
<body bgcolor="#FFFFFF" text="#000000" background="images/bk-pattern.gif" leftmargin="0" topmargin="0" scroll="no" oncontextmenu="showtool();return false;" ondragstart="return false;" onclick="hidetool()" onresize="recalcposition()">
<div id="imglayer" style="position:absolute; width:1px; height:1px; z-index:-1; left:0; top:0"><img src="images/sample.jpg" id=sample onmousedown="down();initdrag()" style="cursor:url(images/zoom-in.cur);visibility:hidden" onmousemove="startdrag()" onmouseup="enddrag()" onreadystatechange="initsize();imglist[0]=this.src;"></div>
<div id="tool" style="position:absolute; width:353px; height:10px; z-index:2; left: 0px; top: 0px; visibility: hidden">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" style="border:2px outset #ffffff;background-color:menu">
<table width="100%" border="0" cellspacing="3" cellpadding="0">
<tbody>
<tr>
<td width="20" align="center"><img src="images/zoom-in.gif" width="16" height="16" class="button" onclick="zoomin()"></td>
<td width="20" align="center"><img src="images/zoom-out.gif" width="16" height="16" class="button" onclick="zoomout()"></td>
<td width="20" align="center"><img src="images/move-up.gif" width="16" height="16" class="button" onclick="move()"></td>
<td width="110" background="images/bk-guide.gif">
<div id="zoomhandle" style="position:absolute; width:10px; height:16px; z-index:3;; left: 124px;top:4px"><img src="images/spacer.gif" width="6" height="14" style="border:2px outset #ffffff;background-color:menu" onmousedown="initdrag2()" onmousemove="startdrag2()" onmouseup="enddrag2()"></div>
</td>
<td id=showzoomvalue width="35">100%</td>
<td width="95">
<select id="fitmode" onChange="autofit(this)">
<option value="0" selected>Fit Mode</option>
<option value="1">Fit on Screen</option>
<option value="2">Actual Size</option>
<option value="3">Fit in Width</option>
<option value="4">Fit in Height</option>
</select>
</td>
<td width="20" align="center"><img src="images/print.gif" width="16" height="16" class="button" onclick="window.print()"></td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="6">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="23"><img id="home" src="images/arrow3b.gif" width="16" height="16" class="button" onclick="imgid=0;showimg()" alt="Home" hspace="1"></td>
<td width="23"><img id="previous" src="images/arrow2b.gif" width="16" height="16" class="button" onclick="imgid-=1;showimg()" alt="Previous" hspace="1"></td>
<td width="23"><img id="next" src="images/arrow2.gif" width="16" height="16" class="button" onclick="imgid+=1;showimg()" alt="Next" hspace="1"></td>
<td width="23"><img id="end" src="images/arrow3.gif" width="16" height="16" class="button" onclick="imgid=imglist.length-1;showimg()" alt="End" hspace="1"></td>
<td align="right"> URL <input type="text" id="url" style="width:188px" onmouseover="this.focus();this.select()" onkeypress=changeimg(this) value="http://">
</td>
</tr>
</tbody>
</table>
</td>
<td align="center" valign="bottom"><img src="images/arrow.gif" width="9" height="10" id="extend" onclick="extendit()"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="3" cellpadding="0" id=extendparam style="display:none">
<tbody>
<tr>
<td width="60" height="20"><select id="filtermode" onChange="addfilter(this)">
<option value="" selected>Effect</option>
<option value="none">None</option>
<option value="alpha(">Alpha</option>
<option value="fliph(">Flip-H</option>
<option value="flipv(">Flip-V</option>
<option value="invert(">Invert</option>
<option value="gray(">Gray</option>
<option value="xray(">Xray</option>
<option value="blur(">Blur</option>
<option value="light(">Light</option>
<option value="wave(">Wave</option>
</select></td>
<td id=filterparam align="left"> </td>
<td width="20" align="center"><img src="images/import.gif" width="16" height="16" class="button" onclick="importit()" id="importicon" alt="Please input the URL of your favorite list file that you have ever Exported"></td>
<td width="20" align="center"><img src="images/export.gif" width="16" height="16" class="button" onclick="exportit()" alt="Please choose the Type of Saving:Only HTML"></td>
<td width="20" align="center"><img src="images/save.gif" width="16" height="16" class="button" onclick="document.all.WebBrowser.ExecWB(4,1)"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
下载后把.swf去掉解压即可acd.rar.swf
黑色头发 http://heisetoufa.iteye.com
如果发现本文有误，欢迎批评指正