大图用背景,原理类似这样:
http://www.never-online.net/blog/article.asp?id=52

解决方案 »

  1.   

    楼主得到答案给我一份,[email protected]
      

  2.   

    我找到的答案,给你看看
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>YES!PPG,Your New Liftstyle! - PPG衬衣唯一官方网站</TITLE>
    </HEAD>
    <BODY style="BACKGROUND-REPEAT: repeat-x" text=#000000 leftMargin=0 topMargin=0>
    <script language="JavaScript">
    <!--var smallX = 150; //缩略图宽度
    var bigX = 800; //预览窗大小,可以任意设置
    var bigY = 568;
    var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小
    var srcY = -1;
    var border = 1; //边框var smallY,viewX,viewY,bl,isIE,vX,vY,imgo;window.onload=function (){  //初始化数据 isIE=window.event?1:0; //由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异 if (srcX==-1 || srcY==-1){
        srcX=bigpic.width;
        srcY=bigpic.height;
    } // 如果有一个为-1,则使用原图大小
    else{
        bigpic.width=srcX;
        bigpic.height=srcY;
    } smallY=srcY*smallX/srcX; //按比例计算出缩略图的高
     viewX=bigX/srcX*smallX; //计算缩略图的预览窗口大小
     viewY=bigY/srcY*smallY;
     bl=srcX/smallX; //得到缩放比例 bigbox.style.borderWidth=border; //初始化预览窗
     bigbox.style.width=bigX+border*2*isIE;
     bigbox.style.height=bigY+border*2*isIE; view.style.borderWidth=border; //初始化小预览窗
     view.style.width=viewX-!isIE*border*2;
     view.style.height=viewY-!isIE*border*2; loading.style.left=bigX/2+bigbox.offsetLeft*!isIE-loading.offsetWidth/2; //初始化loading
     loading.style.top=bigY/2+bigbox.offsetTop*!isIE-loading.offsetHeight/2; var imga=document.body.getElementsByTagName("img") //初始化所有缩略图
     for (m=0;m<imga.length;m++)
      if (imga[m].className=="smallpic"){
       imga[m].style.borderWidth=border;
       imga[m].width=smallX;
       imga[m].height=smallY;
       imga[m].onmouseout=function(){if (isIE) view.style.display='none'}
      }
    }function move(e,o){
     if (imgo!=o){ //如果切换图片
       bigpic.style.display = 'none';
       bigpic.src=o.lowsrc; //载入新图片
       imgo=o; //imgo作为标记,避免重复载入相同图片
     }else{
      var e = window.event?window.event:e; //得到IE或FF的event
      if (!isIE){vX=e.pageX-border-o.offsetLeft;vY=e.pageY-border-o.offsetTop}
      else{vX=e.offsetX;vY=e.offsetY} //分别在FF与IE下获得相对坐标
      vX+=-viewX/2; vY+=-viewY/2; //得到缩略图的预览窗位置
      if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
      if (vY < 0) vY = 0;
      if (vX > smallX - viewX) vX = smallX - viewX;
      if (vY > smallY - viewY) vY = smallY - viewY;
      bigpic.style.marginLeft = - vX * bl; //刷新预览窗口
      bigpic.style.marginTop = - vY * bl;  view.style.display = 'block'; //刷新缩略图中预览窗口
      view.style.left = vX + o.offsetLeft + border;
      view.style.top = vY + o.offsetTop + border;
     }
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    *{padding:0;margin:0}
    body{background:black}
    .smallpic{display:block;border:green dotted;float:left}
    #bigbox{border:green solid;width:800px;height:568px;overflow:hidden;font-size:0px;float:left;}
    #view{border:silver solid;width:0;height:0;font-size:0px;display:none;position:absolute;}
    #loading{position:absolute;z-index:-1;font-size:20px;font-weight:bold;color:white;}
    #loading img{vertical-align:middle}
    //-->
    </style>
    <div id="bigbox"><img id="bigpic" src="http://www.whoj.net/images//b1.jpg" border="0" onload="this.style.display = 'block'"><div id="loading"><img src="http://www.whoj.net/images/loading.gif" border="0"> Loading...</div></div><!--预览窗//-->
    <div id="view" onmousemove="if (!isIE) move(event,imgo)" onmouseout="if (!isIE) view.style.display='none'"></div><!--小预览窗//-->
    <img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b1.jpg" src="http://www.whoj.net/images/s1.jpg"><!--缩略图,lowsrc大图,src小图//-->
    <img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b2.jpg" src="http://www.whoj.net/images/s2.jpg">
    <img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b3.jpg" src="http://www.whoj.net/images/s3.jpg">
    <img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b4.jpg" src="http://www.whoj.net/images/s4.jpg">
    <img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b5.jpg" src="http://www.whoj.net/images/s5.jpg"></BODY></HTML>
      

  3.   

    我要的就 不是那种一涨大图一涨小图的 那样网上有的是
    zengxie 发的我也早看过了
    不支持缩略图
    不过还是谢谢大家