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

最新推荐文章于 2020-11-29 18:57:29 发布
最新推荐文章于 2020-11-29 18:57:29 发布
阅读量64 收藏
点赞数
原文链接：http://www.cnblogs.com/Chinasf/archive/2006/12/29/607386.html
版权

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.ο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>
   提示：您可以先修改部分代码再运行

转载于:https://www.cnblogs.com/Chinasf/archive/2006/12/29/607386.html

weixin_30483495
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
snap.js使用，内嵌SVG图像，动画，轨迹变换等。
02-27
snap.js使用，内嵌SVG图像，动画，轨迹变换，内嵌文字，开关、刀闸等造型。
提取ts流中得iframe
07-27
一个简单的从ts流中提取i帧的方法，数字电视传输的协议是用ts流来包装，这里详细的写出了从ts到pes到es在提取出图片的方法
SVG开发之Snap.js教程
weixin_34267123的博客
03-17 317
SVG开发之Snap.js教程 Snap的使用 创建SVG var svg = Snap(100, 100); svg.paper.circle(50,50,40); document.getElementById("append").appendChild(svg.node); 获取页面上的svg var svg...
iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览
前端开发博客
08-25 348
1、iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览这前端代码效果实时预览的需求实际上是非常常见的，例如jsbin，codepen，runjs之类的网站就是满足...
iframe内嵌框架的强大
vincent
07-30 1923
iframe内嵌框架 frameborder=0框架无边框 scrolling="no"无滚动条 class="ifm"样式为名称ifm的样式 name="mylink"名字叫mymink src=#连接路径或地址为#
ASP.NET实现根据URL生成网页缩略图的方法
10-23
***实现根据URL生成网页缩略图的方法涉及到网络编程、图形处理以及***的页面与后端逻辑处理。以下将详细介绍此过程中所涉及的关键知识点。 首先，***是一个基于.NET框架构建而成的Web应用框架。它允许开发者使用...
Shell脚本实现获取网页快照并生成缩略图
09-15
接下来，你需要编写一个JavaScript脚本（如`snap.js`），用于控制PhantomJS获取网页快照。这个脚本接受URL和快照文件名作为参数，打开指定页面，设置视口大小（例如1024x768像素），然后截取页面的第一屏内容并保存...
js简单轮播图实现，圆点随图片数量自动生成
08-22
在网页设计中，轮播图是一种常见的展示多张图片或内容的方式，它允许用户通过滑动或自动切换来查看不同的信息。在这个特定的场景中，我们关注的是如何使用JavaScript、CSS和HTML来实现一个简单的轮播图，并且具有...
readfile.zip_ITK SNAP_itk-snap_snap_图像转换数据_显示mha
07-13
把bmp格式的图像序列转换成mha格式的数据，可以导入ITK_snap软件中显示。
Angularjs（用TS编写）刷新指定iframe
u011187194的专栏
03-31 2880
 let ifrm: HTMLIFrameElement = document.getElementById("myIframe") as HTMLIFrameElement;                     if (ifrm) {                         ifrm.contentDocument.location.reload();      
开发日志：js修改iframe内的css样式
热门推荐
kaidishi的专栏
03-24 3万+
function ft(){ //alert(document.getElementById("myFrame").document); var deptObjs= document.getElementById("myFrame").contentWindow.document.getElementsByTagName("div"); for(var i=0;i<deptObjs.length;
document获取iframe_关于iframe生成图片
weixin_39787594的博客
11-29 534
接到一个需求：在h5 parent上需要iframe嵌入第三方页面child，同时需要操作生成长图，拿着这个需求的时候，想着只要获取到第三方页面的dom元素了，利用html2canvas就能解决了，你以为就是你以为的吗？ 想法1: 子页面传高度给父页面 为什么会有上面的的想法呢，是因为html2canvas需要width、height。width通过document.body.offsetWid...
基于springboot+mybatis实现的学生管理系统
最新发布
08-14
springboot 但功能包含(学生，教师，管理员),项目基于springboot2.1.x实现的管理系统。如果你是spring boot初学者，那么此项目非常适合你。如果喜欢，请随手给个star，谢谢。 编译环境 ： jdk 1.8 mysql 5.5 tomcat 7 框架 ： springboot2.0 mybatis jar包管理工具： Maven 编译器 ： IDEA 系统功能 : 学生信息管理 班级信息管理 教师信息管理 课程信息管理 选课信息管理 考勤信息管理 请假信息管理 成绩信息管理 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
rabbitmq-server-3.8.30-1.el7.noarch.rpm
08-14
rabbitmq-server-3.8.30-1.el7.noarch.rpm 是 RabbitMQ 3.8.30 版本的 RPM 软件包，专为 CentOS 7、RHEL 7 等使用 el7 标识的 Linux 发行版构建的。noarch 表示该包是架构无关的，即适用于任何 CPU 架构。此软件包包含 RabbitMQ 服务器及其所需的运行时组件。 rabbitmq-server-3.8.30-1.el7.noarch.rpm 是 RabbitMQ 3.8.30 版本的 RPM 软件包，专为 CentOS 7、RHEL 7 等使用 el7 标识的 Linux 发行版构建的。noarch 表示该包是架构无关的，即适用于任何 CPU 架构。此软件包包含 RabbitMQ 服务器及其所需的运行时组件。
nestjs node-snap7 实现读写bool数组 单个bool值
05-27
好的，您想问如何使用nestjs和node-snap7实现读写bool数组和单个bool值。首先，您需要安装node-snap7模块，可以通过以下命令进行安装： ``` npm install node-snap7 ``` 接下来，您可以使用以下代码来读取一个bool值： ```typescript import { Injectable } from '@nestjs/common'; import snap7 from 'node-snap7'; @Injectable() export class Snap7Service { private client: snap7.S7Client; constructor() { this.client = new snap7.S7Client(); } async readBool(db: number, start: number): Promise<boolean> { await this.client.connect('192.168.0.1', 0, 1); const buffer = Buffer.alloc(1); const result = await this.client.readArea(snap7.S7AreaDB, db, start, 1, buffer); await this.client.disconnect(); if (result === 0) { return buffer[0] === 1; } else { throw new Error(`Read bool error: ${result}`); } } } ``` 在上面的代码中，我们首先创建了一个Snap7Service类来封装node-snap7模块。在该类的构造函数中，我们创建了一个S7Client实例，并在readBool方法中使用它来连接到PLC，并读取位于指定DB和偏移量的bool值。最后，我们通过检查返回的缓冲区中的第一个字节来确定bool值的状态，并关闭连接。 如果您想要读取bool数组，可以使用以下代码： ```typescript import { Injectable } from '@nestjs/common'; import snap7 from 'node-snap7'; @Injectable() export class Snap7Service { private client: snap7.S7Client; constructor() { this.client = new snap7.S7Client(); } async readBoolArray(db: number, start: number, length: number): Promise<boolean[]> { await this.client.connect('192.168.0.1', 0, 1); const buffer = Buffer.alloc(length); const result = await this.client.readArea(snap7.S7AreaDB, db, start, length, buffer); await this.client.disconnect(); if (result === 0) { const boolArray = []; for (let i = 0; i < length; i++) { boolArray.push(buffer[i] === 1); } return boolArray; } else { throw new Error(`Read bool array error: ${result}`); } } } ``` 在上面的代码中，我们使用类似的方法来连接到PLC并读取bool数组。我们首先创建一个长度为指定长度的缓冲区，并使用client.readArea方法来读取bool数组。最后，我们通过遍历缓冲区中的每个字节并将其转换为布尔型来构建bool数组。 如果您想要写入bool值或bool数组，可以使用以下代码： ```typescript import { Injectable } from '@nestjs/common'; import snap7 from 'node-snap7'; @Injectable() export class Snap7Service { private client: snap7.S7Client; constructor() { this.client = new snap7.S7Client(); } async writeBool(db: number, start: number, value: boolean): Promise<void> { await this.client.connect('192.168.0.1', 0, 1); const buffer = Buffer.alloc(1); buffer.writeUInt8(value ? 1 : 0, 0); const result = await this.client.writeArea(snap7.S7AreaDB, db, start, 1, buffer); await this.client.disconnect(); if (result !== 0) { throw new Error(`Write bool error: ${result}`); } } async writeBoolArray(db: number, start: number, values: boolean[]): Promise<void> { await this.client.connect('192.168.0.1', 0, 1); const buffer = Buffer.alloc(values.length); for (let i = 0; i < values.length; i++) { buffer.writeUInt8(values[i] ? 1 : 0, i); } const result = await this.client.writeArea(snap7.S7AreaDB, db, start, values.length, buffer); await this.client.disconnect(); if (result !== 0) { throw new Error(`Write bool array error: ${result}`); } } } ``` 在上面的代码中，我们使用writeArea方法来写入指定的bool值或bool数组。我们首先将布尔值或布尔数组转换为一个缓冲区，然后使用writeArea方法将其写入到PLC的指定DB和偏移量中。最后，我们检查返回结果以确保写入操作成功。 希望这些代码可以帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值