zoukankan
html css js c++ java
使用iframe和table模拟frameset的resize功能.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>iframe和table模拟frameset的resize功能</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <table id="main" style="100%; height:100%" cellSpacing="0" cellPadding="0" border="0"> <tr> <td style="125px" id="tdLeft"> <iframe id="ifmLeft" style="125px; height:100%" src="http://www.google.com" frameBorder="0" scrolling="auto"></iframe> </td> <td id="tdResizer" style="2px; cursor:e-resize; background-color:#A1C7F9;"> </td> <td width="100%"> <iframe id="ifmRight" style="100%; height:100%" src="http://www.baidu.com" frameBorder="0" scrolling="auto"></iframe> </td> </tr> </table> <script language="javaScript"> var theResizeObj = null; //代表一个 resizeObject() 的实例 This gets a value as soon as a resize start function resizeObject() { this.target = null; //需要 resize 的 object //this.dir = ""; //移动方向 type of current resize (n, s, e, w, ne, nw, se, sw) this.mouseOld_X = null; //鼠标移动时初始 x 坐标 this.mouseOld_Y = null; //鼠标移动时初始 y 坐标 this.oldWidth = null; //需要 resize 的 object 初始 width this.oldHeight = null; //需要 resize 的 object 初始 height //this.oldLeft = null; //定位用的 //this.oldTop = null; this.xMin = 1; //The smallest width possible this.yMin = 1; //The smallest height possible this.xMax = window.screen.availWidth * 0.95; //the max width possible } //准备拖动 function resizeStart() { if(window.event.srcElement.id == "tdResizer") { theResizeObj = new resizeObject(); theResizeObj.target = document.all("ifmLeft"); theResizeObj.mouseOld_X = event.clientX; theResizeObj.oldWidth = theResizeObj.target.offsetWidth; } else { theResizeObj = null; } window.event.returnValue = false; window.event.cancelBubble = true; document.all('tdResizer').setCapture(); } //拖动 function resize() { if(theResizeObj != null) { var newWidth = theResizeObj.oldWidth + window.event.clientX - theResizeObj.mouseOld_X; newWidth = Math.min(newWidth, theResizeObj.xMax); newWidth = Math.max(newWidth, theResizeObj.xMin); theResizeObj.target.style.width = newWidth + "px"; } window.event.returnValue = false; window.event.cancelBubble = true; } //停止拖动; function resizeStop() { if(theResizeObj != null) { theResizeObj = null; } //释放鼠标拖动 document.all('tdResizer').releaseCapture(); } document.onmousedown = resizeStart; document.onmousemove = resize; document.onmouseup = resizeStop; </script> </BODY> </HTML>
参考资料:
http://www.gimoo.net/html/manual/%E5%A4%9A%E5%AA%92%E4%BD%93%E4%B8%8E%E7%BB%BC%E5%90%88%E6%8A%80%E5%B7%A7/%E5%8A%A8%E6%80%81%E6%94%B9%E5%8F%98%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F.htm
(注意:他的脚本挂了马,请小心使用.下面是安全的脚本)
genresize.js
查看全文
相关阅读:
Redis 主从复制架构配置及原理
IPTABLES详解(10):IPTABLES自定义链
ipset
Atitit 数据库核心技术index索引技术 btree hash lsm fulltxt目录1.1. HASH
Atitit 存储引擎核心技术 总结目录1. 表的存储有三个文件:结构+数据+索引 12. 页式管理
Atitit 为什么oracle这类大型数据库比mysql的性能机制目录1. 分区机制差别 11.1. Join算
Atitit 存储与数据库性能调优流程目录1. 数据库出现性能瓶颈,对外表现有几个方面:
ATITIT db perf enhs 数据库性能优化 目录 第一章 Cache类 1 第一节 查询cache 1 第二节 Update cache 2 第三节 内存表机制 零时表 2 第四节 雾
Atitit 核心技术有哪些一般 目录 第一章 Rest调用交互 2 第二章 2 第三章 Cmd调用交互 2 第四章 2 第五章 爬虫技术 2 第一节 Httpclient 2 第二节 Html
Atitit保证架构超前性 前瞻性 目录 第一章 为什么需要修改代码 1 第一节 业务增加功能 1 第二节 增加字段 1 第三节 增加表数据需要查询 修改 1 第四节 类库升级 1 第二章 简单抽象
原文地址:https://www.cnblogs.com/focus/p/961045.html
最新文章
your old project requires credentials for read-only access
What happens to the forks when deleting the original repository?
Cross Site Scripting Prevention Cheat Sheet¶
Git config with directory scope, containing multiple repositories
How can I set up an editor to work with Git on Windows?
firewall-cmd 命令简单总结
Vue 示例
Vue v-model
浅析exports和module.exports的理解
P2651 添加括号III
热门文章
P1414 又是毕业季II
【Oracle】利用level/Connect by 制作连续序列,并借此实现对缺失id的查找
【oracle】查本当连续无重复的序列有无重复,重复多少个,再清除重复项
就Sql解析絮叨几句
【作品】SqlResolver介绍下载交流页
201-Air724UG模块(4G全网通GPRS开发)-模块测试-测试SD卡和扬声器(喇叭)播放功能
200-Air724UG(4G全网通GPRS)开发-下载和运行第一个lua程序
firewalld防火墙详解
Iptables 规则用法小结
centos7防火墙firewalld拒绝某ip或者某ip段访问服务器任何服务
Copyright © 2011-2022 走看看