仿淘宝网图片预览效果

时间：2022-06-25 22:00:19 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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>仿淘宝网图片预览效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
div#PreviewBox{
  position:absolute;
  padding-left:6px;
  display: none;
  Z-INDEX:2006;
}
div#PreviewBox span{
  
  
  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-
  max-
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
var max;
var max;
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);
         var w=checkComplete.__img.width;
         var h=checkComplete.__img.height;
         if(w>=h&&w>maxWidth) {
              previewImage.style.px';
         }
        else if(h>=w&&h>maxHeight) {
              previewImage.style.px';
        }
        else {
              previewImage.style.';
        }
       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.codefans.net
         previewImage.style.';
         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 = '/jscss/demoimg/loading.gif';
</script>
<a href="####" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'>
<a href="/jscss/demoimg/wall_s8.jpg" class="js-smartPhoto-pc" target="_blank"><a href="/jscss/demoimg/wall_s8.jpg" class="js-smartPhoto-pc" target="_blank"><a href="/jscss/demoimg/wall_s8.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="/jscss/demoimg/wall_s8.jpg" alt="" large-src="/jscss/demoimg/wall8.jpg" pic-link="/"  border="0" width="100"/></a></a></a>
</a>
<a href="####" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'>
<a href="/jscss/demoimg/wall_s8.jpg" class="js-smartPhoto-pc" target="_blank"><a href="/jscss/demoimg/wall_s8.jpg" class="js-smartPhoto-pc" target="_blank"><a href="/jscss/demoimg/wall_s8.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="/jscss/demoimg/wall_s8.jpg" alt="" large-src="/jscss/demoimg/wall8.jpg" pic-link="/"  border="0" width="100"/></a></a></a>
</a>
<a href="####" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'>
<a href="/jscss/demoimg/wall_s8.jpg" class="js-smartPhoto-pc" target="_blank"><a href="/jscss/demoimg/wall_s8.jpg" class="js-smartPhoto-pc" target="_blank"><a href="/jscss/demoimg/wall_s8.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="/jscss/demoimg/wall_s8.jpg" alt="" large-src="/jscss/demoimg/wall8.jpg" pic-link="/"  border="0" width="100"/></a></a></a>
</a>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

仿淘宝网图片预览效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程