现在许多的浏览器都支持这样的功能，你新建一个标签页，标签页会以列表的形式显示你最近访问的网页。它的效果是 每个网页放入到一个 框里，在框里按照比例显示该网页，给人的感觉就是对该网页的一个截图效果。
最近在做的网管项目，功能特别多，有时候点击一个功能，可能要经过几级菜单的浏览，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>
分享到：
相关推荐
在网页设计中，实现“点击缩略图，显示大图片（用层显示）”的功能是一项常见的交互需求。这种效果可以通过JavaScript和CSS结合来完成，提供用户友好的浏览体验。下面我们将详细探讨如何利用这两种技术来实现这个...
本教程将详细讲解如何利用jQuery库，特别是结合SliderPro插件，实现一个功能丰富的右侧缩略图轮播图效果。 一、jQuery基础 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互...
"jQuery点击缩略图显示大图切换效果代码"是利用jQuery实现的一种常见网页交互功能，通常应用于产品展示、图片画廊或者网站的焦点图模块。这个功能可以让用户在点击缩略图后，以更清晰、更大的形式查看相应的图片，并...
这一特性使得用户能够选择显示动画最能代表其内容的关键帧作为缩略图，从而提供更准确的预览效果。例如，如果SWF文件是一个动画短片，用户可以选择抓取第一帧、最后一帧或者某个特定的动作帧，确保缩略图能反映动画...
"jQuery点击缩略图显示大图切换效果代码"是一个典型的JavaScript库应用案例，它利用jQuery的高效性能和丰富的API来实现用户交互功能，使得用户可以通过点击小图片（缩略图）来预览或查看大图，并实现图片之间的平滑...
1. **布局设计**：首先，我们需要在页面上设置一个主展示区域，用于显示大图，以及一组导航缩略图。每个缩略图都应该链接到对应的大图资源。 2. **JavaScript初始化**：在页面加载完成后，使用JavaScript获取所有的...
"jQuery缩略图放大镜效果"是一种常见的交互设计技术，它允许用户通过鼠标悬停在缩略图上，预览图片的详细细节，从而提升浏览体验。下面将详细解释这一技术的实现原理、相关知识点以及如何使用jQuery来创建这种效果。...
"带缩略图轮播效果（全屏切换）"是一种常见的网页组件，它允许用户通过点击缩略图或者使用导航箭头来浏览一系列全屏展示的图片或内容。这种功能常用于产品展示、图片画廊、幻灯片等场景，给用户带来更直观、更丰富的...
在网页设计中，焦点图的实现方式多种多样，其中一种就是带有缩略图效果的设计。这种设计能够使用户直观地看到所有可用的图片，并可以选择他们感兴趣的图片进行预览。 本资源提供的“带缩略图效果的焦点图”可能是一...
【标题】"右侧缩略图jQuery轮播图效果"是一个常见的网页设计元素，它通过JavaScript库jQuery实现了一种动态展示图片的方式。这种效果通常用于网站的首页或产品展示区域，以吸引用户注意力并提供交互性体验。轮播图在...
4. CSS样式：使用CSS可以轻松控制缩略图的外观，包括边框、阴影、过渡效果等。例如，可以设置`max-width: 100%`来确保图片不会超出其容器，以及`height: auto`来保持原始宽高比。 5. 图片元数据：在HTML中，可以...
在实现缩略图广告效果时，JavaScript 可能用于控制缩略图的显示、切换、动画效果等。 项目中的文件结构包括以下几个部分： 1. `readme.htm`：这是一个常见的文档，可能包含了项目的简介、使用说明或开发者笔记。 2....
在网页设计中，"JS点击缩略图弹出大图网页特效"是一种常见的交互功能，它使得用户在浏览网页时可以方便地查看图片的详细内容。这种特效通常应用于产品展示、图片画廊或者任何需要预览大图的场景。下面我们将深入探讨...
"js实现缩略图自动滚动并显示对应大图"就是这样一个功能，它利用JavaScript语言来实现图片的动态展示效果。 首先，我们来看看实现这个功能所需的基本步骤： 1. **HTML结构**：页面需要包含两部分，一部分是缩略图...
在IT领域，缩略图预览和点击弹出原图是一种常见的用户体验设计，广泛应用于图像展示、相册浏览以及各种媒体资源的展示。这个功能可以让用户快速浏览大量图片，同时在需要时查看高清细节。本篇文章将深入探讨这一功能...
在网页设计中，图片轮播和缩略图焦点图轮换是一种常见的视觉呈现方式，用于展示多张图片或内容，特别是在产品展示、新闻资讯、广告宣传等场景中。本项目"简单的图片轮播带缩略图焦点图轮换效果"旨在提供一种简洁且...
现在，当用户将鼠标移到缩略图上时，标题和文字说明将以平滑的淡入效果显示；鼠标移开后，它们会淡出并隐藏。这种效果增加了用户体验，使网站更具吸引力和互动性。 为了将这个效果应用到多个缩略图，只需要在HTML中...
- 图片替换：替换原缩略图元素的`src`属性，使图片直接在原位置放大显示。 - 分离视图：在页面的独立区域（如画廊视图）加载大图，保持缩略图区域不变。 5. **动画效果**：为了增加用户体验，可以添加过渡动画，...
在JavaScript编程中，实现一个带有缩略图的图片切换效果并配备控制按钮是一项常见的需求，尤其是在网站设计和用户界面开发中。这样的功能可以为用户提供更好的交互体验，让他们更轻松地浏览一组图片。以下是对这个...
总的来说，"支持缩略图预览的左右切换焦点图效果"是一种增强用户体验的网页设计技术，通过结合JavaScript和CSS的力量，实现图片的动态切换与缩略图预览，使用户在浏览过程中更加自如。对于前端开发者来说，掌握这种...