SNAP的另类实现,采用js生成IFRAME内嵌框架的形式实现链接的网页'图像预览'-阿里云开发者社区

开发者社区> 老朱教授> 正文

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

简介:
+关注继续查看

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如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ArcEngine中实现Symbol的预览
版权声明:欢迎评论和转载,转载请注明来源。 https://blog.csdn.net/zy332719794/article/details/9951573   我们在程序开发的时候经常用到Symbol,有时还需要预览他们的样式。
574 0
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之一:使用Three.js创建你的第一个三维场景
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
3310 0
【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123753 ...
761 0
实现网络图片爬虫,只需5秒快速把整个网页上的图片全下载打包zip
我们经常需要用到互联网上的一些共享资源,图片就是资源的一种,怎么把网页上的图片批量下载下来?有时候我们需要把网页上的图片下载下来,但网页上图片那么多,怎么下载我们想要的东西呢,如果这个网页都是我们想要的图片,难道我们要一点一点一张一张右键下载吗? 当然不好,这里提供一段Java实现的网络爬虫抓图片代码,程序员同志有喜欢的记得收藏哦, 材料:必须会java开发,用到的核心jar Jsoup自己去网上下载很多。
772 0
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之二:构建Three.js应用的基本组件
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
1783 0
从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(四)-创建Controller 版权声明:本文为博主原创文章,未经博主允许不得转载。
1038 0
代码生成框架Velocity
代码生成框架VelocityVelocity是一个基于Java的模板引擎,用户可以使用模板语言VTL来引用由Java代码定义的对象。
1016 0
【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81055973 ...
872 0
【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123779 ...
857 0
+关注
3546
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载