<!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;//More:www.codefans.net 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="/jscss/demoimg/wall_s8.jpg" alt="" large-src="/jscss/demoimg/wall8.jpg" pic-link="/" border="0" width="100"/> </a> <a href="####" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'> <img src="/jscss/demoimg/wall_s8.jpg" alt="" large-src="/jscss/demoimg/wall8.jpg" pic-link="/" border="0" width="100"/> </a> <a href="####" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'> <img src="/jscss/demoimg/wall_s8.jpg" alt="" large-src="/jscss/demoimg/wall8.jpg" pic-link="/" border="0" width="100"/> </a> </body> </html>
|
|