您的位置：首页 > Web前端 > JavaScript

SNAP的另类实现,采用js生成IFRAME内嵌框架的形式实现链接的网页'图像预览'

2006-12-29 21:09 645 查看
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>

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

function copyCode(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
function runCode(obj) {
var winname = window.open('', "_blank", '');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.close();
}
function saveCode(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','code.htm');
winname.close();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航