网页的缩略图效果显示

最新推荐文章于 2023-02-13 15:08:06 发布
最新推荐文章于 2023-02-13 15:08:06 发布
阅读量531 收藏
点赞数
分类专栏： web开发 文章标签： 浏览器 .net Google XHTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunlujing/article/details/83853069
版权
现在许多的浏览器都支持这样的功能，你新建一个标签页，标签页会以列表的形式显示你最近访问的网页。它的效果是 每个网页放入到一个 框里，在框里按照比例显示该网页，给人的感觉就是对该网页的一个截图效果。

最近在做的网管项目，功能特别多，有时候点击一个功能，可能要经过几级菜单的浏览，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.οnmοuseοver=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>
sunlujing
关注
专栏目录
生成网页缩略图(输入网址，宽度，高度生成缩略图)
10-22
生成网页缩略图，输入网址，宽度，高度生成缩略图 不过，我生成的是bmp，又需要自行修改。我也是拿别人的用的
在网页上显示真正的缩略图,非js处理的缩放
lee576的专栏
11-05 4080
网站上可能会有很多图片，比如产品图片等，而且他们可能大小不一，宽度和高度也不一定一样，有的很大有的很小。如果放在一张网页上，可能会破坏版面，但是如果强制让他们按照指定的宽度和高度显示，因为比例不同还会出现变形，显示效果很糟糕，还有最大的缺点是，文件尺寸丝毫没有变化，当图片很大的时候，用户想要看到图片，必须经过漫长等待下载图片，怎么办呢？好，这里设计到了缩略图，就像Windows中的缩略图查看一样，
网站首页页面缩略图制作
老尹的笔记
03-04 3537
上alexa 时，总能看到alexa 显示被查询网站的首页截图，这个截图是怎么实现的呢。通过察看页面内容，发现原来是通过调用amazon的服务程序获得的。http://ast.amazonaws.com/Xino/?Action=Redirect&Service=AlexaSiteThumbnail&Url=baidu.com&AWSAccessKeyId=1FVZ0JNEJDA5TK457CR2
网页中缩略图的意义
weixin_30719711的博客
07-21 401
<!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> <titl...
一个生成网页缩略图的开源工具
06-29
Scrender是一个生成网页缩略图的开源工具，很好用的
基于JavaScript实现带缩略图的轮播效果
10-20
带缩略图的轮播效果更是提供了额外的导航功能，使得用户能够更加直观地看到当前显示图片的全图，方便进行图片间的切换。 要实现带缩略图的轮播效果，通常需要涉及到HTML、CSS和JavaScript三种技术。首先，我们使用...
jQuery点击缩略图显示大图切换效果代码.zip
07-05
"jQuery点击缩略图显示大图切换效果代码"是利用jQuery实现的一种常见网页交互功能，通常应用于产品展示、图片画廊或者网站的焦点图模块。这个功能可以让用户在点击缩略图后，以更清晰、更大的形式查看相应的图片，并...
鼠标放在缩略图上面显示大图——ppt图片幻灯效果模板.rar
09-10
总结来说，"鼠标放在缩略图上面显示大图——ppt图片幻灯效果模板"是一种增强PPT演示效果的方法，它通过巧妙地利用PowerPoint的动画和触发器功能，实现了与网页设计中类似的交互体验。这种技术在产品展示、摄影集、...
JS实现鼠标移动到缩略图显示大图的图片放大效果
01-19
一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，...
右侧缩略图jQuery轮播图效果.zip
07-04
本教程将详细讲解如何利用jQuery库，特别是结合SliderPro插件，实现一个功能丰富的右侧缩略图轮播图效果。 一、jQuery基础 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互...
JS动态让网页生成的产品图片全部生成缩略图
07-21
网上提供的很多JS自动让图片生成缩略图一般的只是用在静态页面上的一个图片,如果像对ASP产品页面生成出来的多张图片就不起作用了,有了这个代码就可以解决这个问题了,让所有读取数据库的产品图全都缩略..
网页缩略图参考网址
Ray
01-14 267
网页缩略图参考网址 抓取并制作网页缩略图 http://kennychen.iteye.com/blog/807832 网页生成pdf文件。（html转pdf）(带效果图) http://blog.csdn.net/KimmKing/archive/2008/01/07/2029351.aspx 寻找将网页保存为图片的库 http://www.iteye.com/topic...
html 图片的缩略图,纯CSS控制的缩略图效果
weixin_30421043的博客
06-04 350
站长天空-网页特效-图片特效-纯CSS控制的缩略图效果缩略图列表单个缩略图Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec pede. Vivamus euismod, odio eu sagittis tempor, ligula felis congue nunc, sit amet imperdiet mi...
前端之实现缩略图展示网页
热门推荐
珊瑚海的博客
05-18 1万+
有的时候，我们想对我们项目下的网页进行缩略图的展示，如下效果：   如果要实现上面的展示网页，需要三个步骤： 1.      生成网页的快照； 2.      把网页快照生成合适大小的缩略图； 3.      根据上面缩略图生成展示网页。 Ps：常见安装错误，请见本文档最后。 一、生成网页的快照 所谓生成网页的快照，就是对网页进行截图，我们这里用phantomjs 来实现。
前端分享链接标题、描述和缩略图实现
最新发布
web_long的博客
02-13 1180
分享链接缩略图实现
html如何显示缩略图,前端实现div（DOM）缩略图
weixin_33467061的博客
06-17 3086
methods:{loadThumbnail(){lettimeer=setTimeout(()=>{if(document.readyState==='complete'){ // 判断页面是否加载完成this.clickGeneratePicture()}},500)//清除定时器this.$once('hook:beforeDestroy',(...
html 图片的缩略图,纯CSS制作缩略图片
weixin_32334681的博客
06-04 2627
在这篇教程中，主要是跟着Alen Grakalic学习3种CSS制作缩略图的方法。我们在Web页面中时常碰到缩略图的应用，那么下面我将学习三种使用CSS的技巧来主内容显示图像的一部分。这几种技巧贵在于，我们不需要去切图片，而只要使用CSS代码，能帮我们在页面中显示我们需要显示的部分图像出来，而图像的其他部分将被隐藏起来。另外需要提醒大家的是，我们这里所说的图片是指内容图像()而不是背景图片，下面我...
(转)在网页上显示缩略图
weixin_30550271的博客
08-18 479
网站上可能会有很多图片，比如产品图片等，而且他们可能大小不一，宽度和高度也不一定一样，有的很大有的很小。如果放在一张网页上，可能会破坏版面，但是如果强制让他们按照指定的宽度和高度显示，因为比例不同还会出现变形，显示效果很糟糕，还有最大的缺点是，文件尺寸丝毫没有变化，当图片很大的时候，用户想要看到图片，必须经过漫长等待下载图片，怎么办呢？好，这里设计到了缩略图，就像Windows中的缩略图查看一样，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值