一段更强大的js实现放大图片的代码，还有许多其他功能如打印保存等

于 2008-08-12 21:37:19 发布
阅读量168 收藏
点赞数
分类专栏： javaScript 文章标签： HTC QQ JavaScript UP ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/heisetoufa/article/details/83265362
版权
本文感谢了一位名为空心菜的用户提供的无私帮助，并分享了一个文件的下载方式，指出下载后需去除.swf后缀并进行解压。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

感谢空心菜的无私帮助

下载后把.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 οnmοusedοwn="down();initdrag()" style="cursor:url(images/zoom-in.cur);visibility:hidden" οnmοusemοve="startdrag()" οnmοuseup="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 οnkeypress="filter_alpha()" οnmοuseοver="this.focus();this.select()"> - <input id=alpha2 type=text value=0 size=3 οnkeypress="filter_alpha()" οnmοuseοver="this.focus();this.select()"> Style <input id=alpha3 type=text value=2 size=1 οnkeypress="filter_alpha()" οnmοuseοver="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 οnkeypress="filter_blur()" οnmοuseοver="this.focus();this.select()"> Strength <input id=blur2 type=text value=5 size=3 οnkeypress="filter_blur()" οnmοuseοver="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 οnkeypress="filter_light()" οnmοuseοver="this.focus();this.select()"> <input id=light2 type=text value=0 size=2 οnkeypress="filter_light()" οnmοuseοver="this.focus();this.select()"> <input id=light3 type=text value=0 size=2 οnkeypress="filter_light()" οnmοuseοver="this.focus();this.select()"> Strength <input id=light4 type=text value=20 size=3 οnkeypress="filter_light()" οnmοuseοver="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 οnkeypress="filter_wave()" οnmοuseοver="this.focus();this.select()"> Freq <input id=wave2 type=text value=5 size=2 οnkeypress="filter_wave()" οnmοuseοver="this.focus();this.select()"> Strength <input id=wave3 type=text value=2 size=3 οnkeypress="filter_wave()" οnmοuseοver="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 οnkeypress="readfavo()" οnmοuseοver="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" οncοntextmenu="showtool();return false;" οndragstart="return false;" οnclick="hidetool()" οnresize="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 οnmοusedοwn="down();initdrag()" style="cursor:url(images/zoom-in.cur);visibility:hidden" οnmοusemοve="startdrag()" οnmοuseup="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" οnclick="zoomin()"></td>
 <td width="20" align="center"><img src="images/zoom-out.gif" width="16" height="16" class="button" οnclick="zoomout()"></td>
 <td width="20" align="center"><img src="images/move-up.gif" width="16" height="16" class="button" οnclick="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" οnmοusedοwn="initdrag2()" οnmοusemοve="startdrag2()" οnmοuseup="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" οnclick="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" οnclick="imgid=0;showimg()" alt="Home" hspace="1"></td>
  <td width="23"><img id="previous" src="images/arrow2b.gif" width="16" height="16" class="button" οnclick="imgid-=1;showimg()" alt="Previous" hspace="1"></td>
  <td width="23"><img id="next" src="images/arrow2.gif" width="16" height="16" class="button" οnclick="imgid+=1;showimg()" alt="Next" hspace="1"></td>
  <td width="23"><img id="end" src="images/arrow3.gif" width="16" height="16" class="button" οnclick="imgid=imglist.length-1;showimg()" alt="End" hspace="1"></td>
  <td align="right"> URL  <input type="text" id="url" style="width:188px" οnmοuseοver="this.focus();this.select()" οnkeypress=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" οnclick="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" οnclick="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" οnclick="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" οnclick="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

如果发现本文有误，欢迎批评指正

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值