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
查看全文
相关阅读:
Sublime Text 3 配置 PHPCS 插件
Rainmeter 一部分 语法 中文教程
极域电子教室卸载或安装软件后windows7无法启用触摸板、键盘
一些常用&实用的Linux命令
理解linux sed命令
vi入门到精通
Vim的行号、语法显示等设置(.vimrc文件的配置)以及乱码解决
SliTaz 从入门到精通
Slitaz定制
Slitaz 中文定制手册
原文地址:https://www.cnblogs.com/focus/p/961045.html
最新文章
eclipse 运行简单JAVA程序事例
JAVA统计中文的个数
JAVA 正则表达式
JAVA eclipse 安装lombok
Mysql alter常见使用语句
获取自增ID
使用JAVA的URL类处理url事例
JAVA开发总结
eclipse 远程调试程序
JS 处理Json数据事例
热门文章
Mysql 表分区
Mysql prepare 语法
注意力经常分散的解决办法
shell alias添加别名使用
PYQT操作JS并且截图事例
浅谈关于QT中Webkit内核浏览器
thinkphp笔记
PHPSTORM/IntelliJ IDEA 常用 设置配置优化
2014-9-4 技术创业分享汇
firefox chrome ie9,10,11 不支持selectSingleNode和selectNodes的解决方法
Copyright © 2011-2022 走看看