这个效果怎么实现的？点小图后出现的页面，放大缩小的效果

在浏览网页时看到这样一个效果,感觉不错,但是看了半天也没明白它如何对图片进行处理的,不晓得其代码是如何获取要操作图片的联接的!本人对javascript不懂,只是想利用这个网页所用的效果来处理自己网页的上图片?望高手解惑与指导如何实现!不胜感谢!
http://www.wga.hu/frames-e.html?/html/a/abadia/index.html进这个网页点击那张小图可以进入那个实现了图片缩放的页面.(我要问的就是这个进入的页面的效果如何实现)点击小图后进入的页面地址是这个:http://www.wga.hu/support/viewer/z.html,但是直接从这个地址进入的话就看不到大图了,而是只有那些控制缩放的东东.
这个网站的首页是http://www.wga.hu,可以进去看看,不错的网站,可以查看到欧洲绘画大师的作品.
我在此粘贴一些我认为是的主要的代码,也不晓得是不是这些:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<!-- saved from url=(0039)http://www.wga.hu/support/viewer/z.html -->
<HTML><HEAD><TITLE>Web Gallery of Art - Image Viewer</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD><FRAMESET border=0 
frameSpacing=0 rows=29,* frameBorder=0><FRAME border=0 name=control 
marginWidth=0 marginHeight=0 
src="Web Gallery of Art - Image Viewer.files/zoom.html" noResize 
scrolling=no><FRAME border=0 name=image marginWidth=0 marginHeight=0 
src="Web Gallery of Art - Image Viewer.files/1.html" noResize></FRAMESET></HTML>
-------------------------------------------------------------------------
bgColor=#c0c0c0 rightMargin=0 TOPMARGRIN="0" LEFTMARGRIN="0"><IMG 
src="zoom.files/zoom2.gif" useMap=#zoom2 border=0>
<SCRIPT>
var lastbgcolor="ffffff"window.parent.imagename=window.parent.opener.imagename;
window.parent.imagex=window.parent.opener.imagex;
window.parent.imagey=window.parent.opener.imagey;
if (window.navigator.userAgent.indexOf("MSIE")!=-1)
{
// OwnCapture.setCapture();
}
else
{
window.parent.captureEvents(Event.RESIZE);
}
window.parent.onresize=setStatus;
window.parent.lastz=100;function setStatus()
{
         x=window.parent.frames[1].document.body.offsetWidth;
        y=window.parent.frames[1].document.body.offsetHeight;
lastz=window.parent.lastz;
zz=lastz+"%";
if (lastz==-1) zz="fit to width ("+Math.round(x*100/window.parent.imagex)+"%)";
if (lastz==-2) zz="fit to height ("+Math.round(y*100/window.parent.imagey)+"%)";
self.defaultStatus=self.status="Zoom: "+zz;
}function setbg(bg)
{
lastbgcolor=bg;
window.parent.frames[1].document.bgColor=bg;
}
function zoom(z)
{
window.parent.lastz=z;
window.parent.frames[1].document.open();
window.parent.frames[1].document.writeln('<BODY LEFTMARGIN=0 TOPMARGIN=0 BOTTOMMARGIN=0 RIGHTMARGIN=0 BGCOLOR="'+lastbgcolor+'">');
window.parent.frames[1].document.writeln('<CENTER><IMG SRC="'+window.parent.imagename+'" '+ (z==-1?'WIDTH=100%':((z!=-2&&z!=100)?(' WIDTH='+z*window.parent.imagex/100):'')) + (z==-2?'HEIGHT=100%':((z!=-1&&z!=100)?(' HEIGHT='+z*window.parent.imagey/100):'')) + '></CENTER>');
window.parent.frames[1].document.close();
setStatus();
}
</SCRIPT>
 <MAP name=zoom2>
<AREA onmousedown="return false;" 
  onmouseover='self.status="Zoom to 25%";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Zoom: 25%" coords="0, 0, 40, 24" href="javascript:zoom(25)">
<AREA 
  onmousedown="return false;" 
  onmouseover='self.status="Zoom to 50%";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Zoom: 50%" coords="37, 0, 72, 24" href="javascript:zoom(50)">
<AREA 
  onmousedown="return false;" 
  onmouseover='self.status="Zoom to 75%";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Zoom: 75%" coords="76, 0, 110, 24" href="javascript:zoom(75)">
<AREA 
  onmousedown="return false;" 
  onmouseover='self.status="Zoom to 100%";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Zoom: 100%" coords="111, 1, 151, 24" href="javascript:zoom(100)">
<AREA 
  onmousedown="return false;" 
  onmouseover='self.status="Zoom to 150%";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Zoom: 150%" coords="152, 1, 194, 23" href="javascript:zoom(150)">
<AREA 
  onmousedown="return false;" 
  onmouseover='self.status="Zoom to 200%";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Zoom: 200%" coords="195, 2, 237, 24" href="javascript:zoom(200)">
<AREA 
  onmousedown="return false;" 
  onmouseover='self.status="Zoom to fit width";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Fit width" coords="238, 1, 298, 24" href="javascript:zoom(-1)">
<AREA 
  onmousedown="return false;" 
  onmouseover='self.status="Zoom to fit height";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Fit height" coords="299, 0, 370, 23" href="javascript:zoom(-2)">
<AREA 
  onmousedown="return false;" 
  onmouseover='self.status="White background";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="White background" coords="372, 0, 396, 24" 
  href="javascript:setbg('ffffff')">
<AREA onmousedown="return false;" 
  onmouseover='self.status="Gray background";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Gray background" coords="397, 0, 420, 24" 
  href="javascript:setbg('808080')">
<AREA onmousedown="return false;" 
  onmouseover='self.status="Black background";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Black background" coords="421, 0, 447, 24" 
  href="javascript:setbg('000000')">
<AREA onmousedown="return false;" 
  onmouseover='self.status="Close window";return true' 
  onmouseout="self.status=self.defaultStatus;return true" shape=RECT 
  alt="Close window" coords="448, 0, 492, 24" 
  href="javascript:window.parent.close()"></MAP></BODY></HTML>
-------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0039)http://www.wga.hu/support/viewer/1.html -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<SCRIPT>
var xr=0,yr=0;
var x=-1,y=-1;
if (window.navigator.userAgent.indexOf("MSIE")==-1)
{
x=window.innerWidth;
y=window.innerHeight;
}
else
{
x=document.body.offsetWidth;
y=document.body.offsetHeight;
}
if (x<=0) x=frame.width;
if (y<=0) y=frame.height;
window.parent.lastz=100;if (x>0) xr=window.parent.opener.imagex/ x;
if (y>0) yr=window.parent.opener.imagey/ y;if (x<=0 || y <= 0 || (xr<1 && yr<1) )
{
document.writeln('<CENTER><IMG SRC="'+window.parent.opener.imagename+'"></CENTER>');
self.defaultStatus="Zoom: 100%";
window.parent.lastz=100;
} 
else if (xr<yr)
{
document.writeln('<CENTER><IMG SRC="'+window.parent.opener.imagename+'" HEIGHT=100%></CENTER>');
self.status="Zoom: fit height ("+Math.round(100.0/yr)+"%)";
window.parent.lastz=-2;
} 
else
{
document.writeln('<CENTER><IMG SRC="'+window.parent.opener.imagename+'" WIDTH=100%></CENTER>');
self.status="Zoom: fit width ("+Math.round(100.0/xr)+"%)";
window.parent.lastz=-1;
}
</SCRIPT>
</BODY></HTML>

解决方案 »

  1.   

    不懂（就是没有基础）很难教，其实要点只是css里面zoom属性而已，由鼠标滑轮事件触发
      

  2.   

    用这个方法可以的
    function bbimg(o){
    var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;
    if(zoom>0) 
      o.style.zoom=zoom+'%';
    return false;
    }
      

  3.   

    在网上看到另一代码也是实现这个的,在以下的这段代码中有怎样实现调用定义的函数,和添加要处理图片路径的方法,可是在上面的那个代码中却不知道是如何添加或者说是获得要处理图片的路径的,还有就是在哪里对定义的java script函数进行了调用,这应该是我所问问题的关键,其实没有学习过这个语言应该对我问题的解答不是太大的障碍吧,就像下面这个就说得很清楚哒!多谢上面高手的回答,希望能有更详细的解答,如果能稍注解下说下操作方法就ok哒!呵呵,要求有点多嗬~对了我怎么将点数给回答问题的人呀?!第一次提问不清楚,要是没给分就不好意思哒~
    JAVAScript如何实现图片等比缩放！
    以下是代码片段：
    <script language="JavaScript">
    <!--
    //图片按比例缩放
    var flag=false;
    function DrawImage(ImgD){
    var image=new Image();
    var iwidth = 160; //定义允许图片宽度，当宽度大于这个值时等比例缩小
    var iheight = 120; //定义允许图片高度，当宽度大于这个值时等比例缩小
    image.src=ImgD.src;
    if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>= iwidth/iheight){
    if(image.width>iwidth){ 
    ImgD.width=iwidth;
    ImgD.height=(image.height*iwidth)/image.width;
    }else{
    ImgD.width=image.width; 
    ImgD.height=image.height;
    }ImgD.alt=image.width+"×"+image.height;
    }
    else{
    if(image.height>iheight){ 
    ImgD.height=iheight;
    ImgD.width=(image.width*iheight)/image.height; 
    }else{
    ImgD.width=image.width; 
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
    }
    } 
    //调用：<img src="图片" onload="javascript:DrawImage(this)">
    //-->
    </script><img src=”图片” onload=”javascript:DrawImage(this)”>onload=”javascript:DrawImage(this)” 
    这句增动你要缩小的图片的<img  />中再把上面的函数加到
    <head>
    </head>
    之间就可以了！var iwidth = 160; //定义允许图片宽度，当宽度大于这个值时等比例缩小
    var iheight = 120; //定义允许图片高度，当宽度大于这个值时等比例缩小
    这两个值是限制图片最大的宽度或高度，自己需要多大就改为多大
      

  4.   

    JavaScript:实现页面图片的动态缩放
    <html>
    <head>
    <title>Demotitle><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script language="JavaScript" type="text/JavaScript">
    //改变图片大小
    function resizepic(thispic)
    {
    if(thispic.width>700) thispic.width=700;
    }
    //无级缩放图片大小
    function bbimg(o)
    {
      var zoom=parseInt(o.style.zoom, 10)||100;
      zoom+=event.wheelDelta/12;
      if (zoom>0) o.style.zoom=zoom+'%';
      return false;
    }
    //双击鼠标滚动屏幕的代码
    var currentpos,timer;
    function initialize()
    {
    timer=setInterval ("scrollwindow ()",30);
    }
    function sc()
    {
    clearInterval(timer);
    }
    function scrollwindow()
    {
    currentpos=document.body.scrollTop;
    window.scroll(0,++currentpos);
    if (currentpos !=document.body.scrollTop)
    sc();
    }
    document.onmousedown=sc
    document.ondblclick=initialize//更改字体大小
    var status0='';
    var curfontsize=10;
    var curlineheight=18;
    function fontZoomA(){
      if(curfontsize>8){
        document.getElementById('fontzoom').style.fontSize=(--curfontsize)+'pt';
        document.getElementById('fontzoom').style.lineHeight=(--curlineheight)+'pt';
      }
    }
    function fontZoomB(){
      if(curfontsize<64){
        document.getElementById('fontzoom').style.fontSize=(++curfontsize)+'pt';
        document.getElementById('fontzoom').style.lineHeight=(++curlineheight)+'pt';
      }
    }
    </script></head>
    <body leftmargin=0 topmargin=0 > <IMG onmousewheel="return bbimg(this)" src="http://www.it6.com.cn/lovejs/images/logos.gif" onload=resizepic(this) border=0></body>
    </html>