转 JS图片特效【鼠标放在小图上显示大图】
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JS图片特效</title><style type="text/css" media="screen">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>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 onmouseout="hidePreview(event);"> <span></span> <div> <a id="previewUrl" href="javascript:void(0)" target="_blank">caiying2007<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://img.taobao.com/2k6/sys/list/loading.gif';</script><a href="####" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'><img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CIzU1qighKqphQEQyAEYvQEyCJXvZrbNiPpO" alt="转 JS图片特效【鼠标放在小图下显示大图】" large-src="http://pagead2.googlesyndication.com/pagead/imgad?id=CPPis6646vaWqgEQrAIY7wEyCPL_W8tnwBVd" pic-link="http://bbs.blueidea.com/thread-2784770-1-1.html" border="0" width="100"/></a></body></html> 演示地址http://www.aspxcs.net/HTML/1250401022.html