现在许多的浏览器都支持这样的功能，你新建一个标签页，标签页会以列表的形式显示你最近访问的网页。它的效果是 每个网页放入到一个 框里，在框里按照比例显示该网页，给人的感觉就是对该网页的一个截图效果。
最近在做的网管项目，功能特别多，有时候点击一个功能，可能要经过几级菜单的浏览，boss 让我考虑是否可以用这种方式记录下用户前几步访问的网页，在网上找了一下资料，找到一个大致类似的，用 div 中嵌入 iframe的方式做的。 代码如下：有其他思路的大神门，请多多赐教。
<!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>
分享到：
相关推荐
在网页实现这样的效果： 点击缩略图，在当前页弹出一个弹框，显示大图。
适合购物类网站产品展示的jQuery缩略图图片轮显，可以制作成相册效果，支持鼠标滑动翻页，单击缩略图切换大图片，或者在大图片上点击左右两侧的箭头切换图片，大图片以上下左右滚动的方式切换显示。本效果兼容IE/...
jQuery Sweet Thumbnails 小圆点焦点图特效代码，带缩略图功能，鼠标放在小圆点上，即可显示出缩略图，大图片边框自动适应图片大小，图片在切换的一瞬间，还有多种切换过渡效果，比如收缩、滚动、张开等效果，几乎不...
一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，...
实现了左侧无刷新分页列表，右侧显示点击左侧缩略图后所得到的大图及文字的详细信息效果代码，此段代码适应于所有需要此类效果的网页使用。本段代码兼容目前最新的各类主流浏览器。
点击网页链接弹出一个图片展示的层效果，在这个层上有关闭按钮，有左右控制按钮和缩略图导航，传入一个json就可以使用，可以当作了JS幻灯来用，带缩略图，带控制按钮，还可以自动播放，功能很强大。使用时点击左上角...
一个竖长的带缩略图幻灯片切换代码，曾经在中国移动12530网站上使用过，现在整理出来了，你可以用在自己的网站上。效果描述：鼠标放在最下边的小图上，对应的大图片淡入淡出切换显示，大图带文字说明。
有缩略图的 Carsousel 效果，其实这些特首都是一个标准的相册都应该有的。这个效果的难点主要是图片的过渡loading需要使用图片的load事件。而用来加载新图片的图片是一个Image对象。 相关说明： 必须使用 ...
实现缩略图和大图的展示的效果界面有一个缩略图和一个大图，在缩略图上移动indicator，会在大图上出现所对应区域的放大图像。改变大视图某个区域颜色，小视图也会更改相应区域的颜色。有点类似在网页上浏览淘宝上...
摘要:脚本资源,CSS特效,CSS3,滑动相册 纯CSS3实现的带缩略图的滑动相册，带有缩略图显示，带有动态切换效果，简单实用。测试请注意，IE8不支持CSS3的部分属性，因此若使用IE可能会看不到滑动效果，而且网页出错，请...
一款由html5 CSS3设计创作的网页焦点图，仔细一看，这个焦点图是 仿iphone x留海屏风格的，这种图片轮播（焦点图）效果支持PC端和移动开发端使用，支持缩略图显示，手机外框和Iphone x十分相似，屏幕顶部的留海也是...
jQuery Lightbox图片框插件，自动在图片显示时候以Ajax方式显示...鼠标点击缩略图，缩略图上会呈现响应特效，点击后图片在当前页显示，并可上一张、下一张浏览本组中的所有图片，可广泛应用到网页相册或图片查看器中。
由js插件配合制作的网页相册效果，本相册在显示方式上，先以单行缩略图滚动的方式显示，点击后进入浏览模式，此模式类似于网页焦点图，可浏览上一张、下一张，在兼容性方面，支持众多的主流浏览器。
最近在开发一个本地互联网应用的项目,为了增加用户体验,需要在搜索结果左侧显示如图一所示的某个网站的缩略图效果,在网上不停地百度谷歌了一上午后,发现大多数实现少量截图还是可以的,如果大批量的截图总会在中途...
四张图片循环切换的Flash焦点图图片效果，ChinaJoy网站使用过的图片推荐效果，风格经典漂亮，内核基于SWF文件，图片切换效果流畅，兼容性也好。因尺寸限制，缩略图只能显示四张，因此大图也只能是4张循环播放切换。
images JavaScript表格高亮选择特效 ...带分类和缩略图显示的jquery相册特 时钟特效 最少代码的瀑布流实现预览效果 滚动条.htm 漂亮的放GG代码的广告框架 用户注册代码 简洁的左右切换焦点图代码(jQuery)
纯CSS实现带上下滚动和缩略图的图片相册效果
另外一种图片墙效果，默认在网页左下角底部显示，点击后向右侧展开，点击缩略图后显示大图，效果很不错
bkViewer中文版是一款非常方便数码照片的浏览和集中处理工具，并且它还可以批量预览图片缩略图，如果您打算截图多个图片的预览效果，选它就对了。 软件说明 bkViewer不会在磁盘中增加任何冗余信息，直接利用现存...
主要为大家详细介绍了基于VUE选择上传图片并页面显示，图片可以删除的效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下