SNAP的另类实现,采用iFRAME,内嵌框架的形式.纯粹娱乐.
通过调整iframe对象style 的zoom 属性,将页缩小.有点象抓的缩略图;并且不需要后台程序的支持,完全前端javascript完成,不过还是有很多的问题的,如果目标地址写了防止在别人框架内的脚本代码或者目标页的脚本运行出错,都会有影响.
<!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>
<script defer="defer" type="text/javascript" charset="gb2312">
/**
原作者：未知
该代码功能很简单，将它做了很小部分的修改
**/
<!--
var tPopWait = 100; //停留tWait豪秒后显示提示。
var tPopShow = 60000; //显示tShow豪秒后关闭提示
var showPopStep = 30; //半透明步长
var popOpacity = 90; //透明度
var fontcolor = "#000000"; //文字颜色
var bgcolor = "white"; //背景颜色
var bordercolor = "black"; //边框颜色
var sPop=null;
var curShow=null;
var tFadeOut=null;
var tFadeIn=null;
var tFadeWaiting=null;
var snapPanel = "";
snapPanel += "<style type='text/css'id='defaultPopStyle'>";
snapPanel += ".cPopText { background-color: "+bgcolor+";color:"+fontcolor+"; border: 1px "+bordercolor+" solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 240px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}";
snapPanel += "</style>";
snapPanel += "<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>";
document.body.innerHTML += snapPanel;
function showPopupText()
{
try{
var o= event.srcElement;
if(o.id == "dypopLayer")
return;
MouseX = event.x;
MouseY = event.y;
if(o.tagName=="A" && o.href!=undefined && o.href!=null && o.href!="")
{
//获取link 的 href 属性，并清除掉 alt && title 属性，以免显示两个提示.
o.dypop=o.href;
if(o.alt!=null&&o.alt!="")
{
o.alt=""
}
if(o.title!=null&&o.title!="")
{
o.title=""
}
document.title = o.href;
}
if(o.dypop!=sPop)
{
sPop = o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null||sPop=="")
{
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else
{
if(o.dyclass!=null)popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
catch(e)
{
alert(e);
}
}
//避免重复引发onload
function changeImage(img,url){
if(img.src==sServiceUrlRoot+"/Caches/loading.gif"){
img.src = url;
}
}
function showIt()
{
dypopLayer.className=popStyle;
//加入img标签
var key=Math.floor( Math.random() * 2000000);
var imageHtml = "<iframe width='100%' height='100%' border='1' src='" + sPop + "' style='zoom:0.5;'></iframe>";
dypopLayer.style.width = 320;
dypopLayer.style.height = 240;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
dypopLayer.innerHTML= imageHtml;
if(MouseX+12+popWidth>document.body.clientWidth)popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight)popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut()
{
if(dypopLayer.filters.Alpha.opacity<popOpacity)
{
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else
{
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn()
{
if(dypopLayer.filters.Alpha.opacity>0)
{
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
-->
</script>
</head>
<body style="height: 700px;">
| <a href="http://www.cnblogs.com/" target="_blank">http://www.cnblogs.com</a> |
<a href="http://chinasf.cnblogs.com/" target="_blank">http://chinasf.cnblogs.com</a>
| <a href="http://www.sina.com/" target="_blank">http://www.sina.com</a> | <a href="http://www.csdn.net/"
target="_blank">http://www.csdn.net</a> | <a dypop="http://baidu.com/" href="http://baidu.com/"
target="_blank">http://baidu.com</a> | <a dypop="http://www.google.com/" href="http://www.google.com/"
target="_blank">http://www.google.com</a> | <a dypop="http://community.csdn.net/"
href="http://community.csdn.net/" target="_blank">http://community.csdn.net</a>
| <a dypop="http://www.gameres.com/" href="http://www.gameres.com/" target="_blank">
http://www.gameres.com</a> | <a href="about:blank" target="_blank">about:blank</a>
|
</body>
</html>
提示：您可以先修改部分代码再运行
本文转自suifei博客园博客，原文链接：http://www.cnblogs.com/Chinasf/archive/2006/12/29/607386.html如需转载请自行联系原作者