编程
您现在的位置:首页 >> 编程

鼠标放上小图生成大图的效果

<!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/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);

         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;

         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 = '/jscss/demoimg/loading.gif';

</script>

<a href="/" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'>

<img src="tool/ExamplePic/example7.jpg" alt="" large-src="tool/ExamplePic/example7.jpg" pic-link="/"  border="0" width="100"/></a>

</body>

</html>