JS+CSS仿淘宝滑过小图预览大图代码

代码简介：

仿淘宝网的商品图片预览效果，点击小缩略图会生成预览大图，这里的生成是指调用，当鼠标放到小图上时激活脚本，开始加载大图，一方面减少网页带宽，另一方面可以方便用户浏览图片，提高用户操作舒适度，总体感觉效果不错，几乎和淘宝网的一一模一样。

代码内容：

View Code

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > JS+CSS仿淘宝滑过小图预览大图代码 - www.webdm.cn </ title >
< meta  http-equiv ="content-type"  content ="text/html;charset=gb2312" >
< style  type ="text/css" >
div#PreviewBox {
  position : absolute ;
  padding-left : 6px ;
  display :  none ;
  Z-INDEX : 2006 ;
}
div#PreviewBox span {
  width : 7px ;
  height : 13px ;
  position : absolute ;
  left : 0px ;
  top : 9px ;
  background : url() 0 0 no-repeat ;
}
div#PreviewBox div.Picture {
  float : left ;
  border : 1px #666 solid ;
  background : #FFF ;
}
div#PreviewBox div.Picture div {
  border : 4px #e8e8e8 solid ;
}
div#PreviewBox div.Picture div a img {
  margin : 19px ;
  border : 1px #b6b6b6 solid ;
  display :  block ;
  max-height :  250px ;
  max-width :  250px ;
}
</ style >
</ head >
< body >
< script  language ="javascript"  type ="text/javascript" >
var  maxWidth = 250 ;
var  maxHeight = 250 ;
function  getPosXY(a,offset) {
        var  p = offset ? offset.slice( 0 ):[ 0 , 0 ],tn;
        while (a) {
           tn = a.tagName.toUpperCase();
            if (tn == ' IMG ' ) {
              a = a.offsetParent; continue ;
           }
          p[ 0 ] += a.offsetLeft - (tn == " DIV " && a.scrollLeft ? a.scrollLeft: 0 );
          p[ 1 ] += a.offsetTop - (tn == " DIV " && a.scrollTop ? a.scrollTop: 0 );
           if (tn == " BODY " )
                 break ;
          a = a.offsetParent;
      }
       return  p;
}
function  checkComplete() {
      if (checkComplete.__img && checkComplete.__img.complete)
              checkComplete.__onload();
}
checkComplete.__onload = function () {
         clearInterval(checkComplete.__timeId);
          // More:www.webdm.cn
          var  w = checkComplete.__img.width;
          var  h = checkComplete.__img.height;
          if (w >= h && w > maxWidth) {
              previewImage.style.width = maxWidth + ' px ' ;
         }
         else   if (h >= w && h > maxHeight) {
              previewImage.style.height = maxHeight + ' px ' ;
        }
         else  {
              previewImage.style.width = previewImage.style.height = '' ;
        }
       previewImage.src = checkComplete.__img.src;previewUrl.href = checkComplete.href;checkComplete.__img = null ;
}
function  showPreview(e) {
         hidePreview (e);
         previewFrom = e.target || e.srcElement;
         previewImage.src = loadingImg; // More:www.webdm.cn
         previewImage.style.width = previewImage.style.height = '' ;
         previewTimeoutId = setTimeout( ' _showPreview() ' , 500 );
         checkComplete.__img = null ;
}
function  hidePreview(e) {
         if (e) {
             var  toElement = e.relatedTarget || e.toElement;
             while (toElement) {
                   if (toElement.id == ' PreviewBox ' )
                           return ;
                  toElement = toElement.parentNode;
            }
       }
        try  {
            clearInterval(checkComplete.__timeId);
            checkComplete.__img = null ;
            previewImage.src = null ;
       }
        catch (e) {}
       clearTimeout(previewTimeoutId);
       previewBox.style.display = ' none ' ;
}
function  _showPreview() {
        checkComplete.__img = new  Image();
         if (previewFrom.tagName.toUpperCase() == ' A ' )
               previewFrom = previewFrom.getElementsByTagName( ' img ' )[ 0 ];
         var  largeSrc = previewFrom.getAttribute( " large-src " );
         var  picLink = previewFrom.getAttribute( " pic-link " );
         if ( ! largeSrc)
              return ;
         else  {
             checkComplete.__img.src = largeSrc;
             checkComplete.href = picLink;
             checkComplete.__timeId = setInterval( " checkComplete() " , 20 );
              var  pos = getPosXY(previewFrom,[ 106 , 26 ]);
             previewBox.style.left = pos[ 0 ] + ' px ' ;
             previewBox.style.top = pos[ 1 ] + ' px ' ;
             previewBox.style.display = ' block ' ;
        }
}
</ script >
< div  id ="PreviewBox"  onmouseout ="hidePreview(event);" >
   < div  class ="Picture"  onmouseout ="hidePreview(event);" >
    < span ></ span >
    < div >
     < a  id ="previewUrl"  href ="javascript:void(0)"  target ="_blank" >< img  oncontextmenu ="return(false)"  id ="PreviewImage"  src ="about:blank"  border ="0"  

onmouseout ="hidePreview(event);"   /></ a >
    </ div >
   </ div >
</ div >
< script  language ="javascript"  type ="text/javascript" >
var  previewBox  =  document.getElementById( ' PreviewBox ' );
var  previewImage  =  document.getElementById( ' PreviewImage ' );
var  previewUrl  =  document.getElementById( ' previewUrl ' );
var  previewFrom  =   null ;
var  previewTimeoutId  =   null ;
var  loadingImg  =   ' http://www.webdm.cn/images/loading.gif ' ;
</ script >
< a  href ="####"  onmouseover ='showPreview(event);'  onmouseout ='hidePreview(event);' >
< img  src ="http://www.webdm.cn/images/wall1_s.jpg"  alt =""  large-src ="http://www.webdm.cn/images/wall1.jpg"  pic-link ="/"   border ="0"  width ="100" /></ a >
</ body >
</ html >
< br  />
< p >< a  href ="http://www.webdm.cn" > 网页代码站 </ a >  - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
代码来自：http://www.webdm.cn/webcode/0fa4ca7c-1750-46d8-9d74-70fed803b7b0.html

 

转载于:https://www.cnblogs.com/webdm/archive/2011/09/03/2165357.html