含有两个iframe的主页面实现鼠标拖动改变其大小

最新推荐文章于 2022-08-16 09:43:43 发布
最新推荐文章于 2022-08-16 09:43:43 发布
阅读量381 收藏
点赞数
文章标签： javascript ViewUI 
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm4.aspx.vb" Inherits="HIG_Receipt.WebForm4"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>WebForm4</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
    <style type=text/css >
    	.resizeDivClass{ 
width:3px; 
margin:0px 0 0px 0; 
background:#ffff33; 
border:5px; 
cursor:e-resize; 
    </style>
    <script type=text/javascript language =javascript  >
    
var mousedown=false;
var aaa;
 function down() {
 mousedown=true;
 aaa=event.clientX-td1.offsetWidth;
 event.srcElement.setCapture();
 }
 function move() {
 if(mousedown==true){
  td1.style.width=Math.max(1,event.clientX-aaa);
 }
 }
function up() {
 event.srcElement.releaseCapture();
 mousedown=false;
 }
    
    
    </script>
  </head>
  <body MS_POSITIONING="GridLayout" >

   <TABLE   width="100%" height="100%" >
			
				<tr>
					
					<td  id="td1" >
					第一个iframe
					<iframe style="WIDTH: 100%; HEIGHT: 100%" src="" frameBorder="0">
					</iframe>
					</td>
					<td  class="resizeDivClass" οnmοusedοwn="down()" οnmοusemοve="move()" οnmοuseup="up()">
				
					</td>
					
					<td >
					第二个iframe
					<iframe style="WIDTH: 100%; HEIGHT: 100%"  src="" frameBorder="0">
						</iframe>
					</td>
				</td>
			
			</table> 

  </body>
</html>

iteye_14608
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现的拖拽效果，解决拖动速度过快时的会卡现象，select的遮挡问题和透明效果
qinglinglaoren的专栏
03-29 6204
我的html 代码 弹出层 点击这里，弹出层 这是标题 X 关闭 这是内容 css样式：@charset "utf-8"; /* CSS Document */ /*作者：北京→南宫*/ body { font:12px/14px Verdana
主页面中的两个iframe实现鼠标拖动改变其大小
12-09
代码如下: <%@ Page Language=”vb” AutoEventWireup=”false” Codebehind=”WebForm4.aspx.vb” Inherits=”HIG_Receipt.WebForm4″%> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <html> <head> <title>WebForm4</title> <meta name=”GENERATOR” content=”Microsoft Visual Studio .NET 7.1″> <meta name=”COD
frame：通过鼠标拉动两个子页面的宽度
小航哥的博客
08-13 1168
除了本文，还可以参考https://www.cnblogs.com/LT0314/p/3805393.html1、只需要简单的frame标签即可实现鼠标拉动调整大小的效果：&lt;html&gt; &lt;frameset cols="25%,50%,25%"&gt; &lt;frame src="frame_a.htm" /&gt; &lt;frame src="frame_b.htm...
拖拽改变iframe大小
崇尚狼性的专栏
03-16 5275
     拖拽改变iframe大小     var isIe = true;       if(!document.all)       {           isIe = false;          }      function downToResize(obj,e){        obj.style.cursor=col-resize;           var e = isI
frame大小变化(鼠标可以拖动)
hope598
06-20 785
&lt;frameset rows="5,*" framespacing="0" frameborder="no" border="0"&gt; &lt;frame scrolling="no"style="border-top:#8AB5E8 5px solid;background-color:#8AB5E8;" noresize="nores
主页面实现两个iframe中元素拖动
11-12
本案例中的"主页面实现两个iframe中元素拖动"就是一个典型的跨iframe交互的示例。这种技术常用于构建模块化、可交互的网页应用。 首先，我们要理解`iframe`（inline frame）的基本概念。`iframe`是HTML的一种元素，...
弹出DIV可拖动窗口示例(编辑窗口/iframe/等待/确认)
06-30
在弹出窗口中使用iframe，可以加载外部资源，比如网页、表单、视频或其他互动内容，使弹出窗口具有更多功能，且与主页面内容分离，互不影响。 4. **等待/确认**：这部分可能涉及到两种常见的用户交互模式。"等待...
iframe 等比例缩放显示
q515656712的博客
08-16 2782
代码】iframe 等比例缩放显示。
嵌入网页，调整内容的大小
雨果的博客
01-10 1万+
当我们需要在自己的网页里嵌入别人网页内容的时候可以用HTML的iframe标签来做到，iframe标签的定义为：iframe 元素会创建包含另外一个文档的内联框架（即行内框架），基本上所有的浏览器都支持。 附上w3school的介绍链接： http://www.w3school.com.cn/tags/tag_iframe.asp 下面是iframe标签的属性： 我用到的是：frameb
自己封装的 vue 查看器可以查看pdf和图片 图片可以切换、旋转 、放大缩小（鼠标滚轮）、拖拽、删除功能
让心在跳动
12-26 1528
图片功能： 切换图片、旋转 、放大缩小（鼠标滚轮）、拖拽、删除功能 当点击“查看当前图片时”，调用vue 中viewer.js组件 也是具有以上功能 pdf功能： 在图片区域可以看到的 啥也不说代码如下： <template> <div class="rotate_contanier"> <div class="headers"> ...
Vue实现弹窗 拖动、放大、缩小
qq_40407998的博客
08-04 8436
实现：拖动，上下放大和左右放大，双击头部会实现全屏，因为普通的弹窗标签会在我们点击弹窗之外的部分的时候自动关闭，所以我们需要给弹窗部分增加一个属性 页面标签引用部分 <el-dialog title="弹窗" :visible.sync="dialogVisible" :close-on-click-modal=false v-dialogDrag width="75%" > //:close-on-click-modal=false 这个属性的作用是不让点击外面关闭弹窗 &lt
【javascript】mouseup与iframe踩坑
不忘初心，坚定道路！
07-19 1124
复现 最近写dooringx-lib时遇到了个巨大难题。 我试着在编辑器的画布中使用iframe，然后iframe中做一个可以拖拽选择的效果，这时这个坑就出现了。 也就是我在iframe中按住鼠标左键，然后移出iframe后松开鼠标左键，此时，父页面无法监听到mouseup事件。 于是我还整了很多骚操作，一开始我觉得可能是preventdefault搞得鬼，把所有preventdefault都删了。发现不行。 然后在iframe里用postmessage告诉父页面左键点击，让父页面dispatch一个假的
iframe放大显示_iframe操作 调整大小
weixin_42361478的博客
12-24 4181
在我们做网页的时候，经常会用到iframe,它很向asp.net中的母板，但是比母板更加的灵活好用。在配合jquery后，会实现很强大的效果，像Tab控件的效果啊等等。第一篇开发经验笔记，还是不说那么多了。进入主题。我们根据不同的单击焦点在同一个iframe中打开不同的网页时，往往都需要去动态的改变iframe的大小。我们都知道去改变它的height,但是往往得不到想要的效果。先说说几种实现的方法...
iframe监听鼠标点击事件
热门推荐
sxqlmc000的博客
04-25 1万+
iframe监听鼠标点击事件需要实现的页面逻辑是： 1. 点击父窗体中按钮，显示侧边栏； 2. 点击页面其他区域（iframe）可以隐藏侧边栏先构造页面文档结构：<html> <body> <aside id="sidebar"> <%--这是需要隐藏的侧边栏--%> </aside> <button><%--点击按
在 iframe 上无法捕获 mousemove
DongFuPanda的博客
11-06 1422
在父级给 document 添加 mousemove 时间，实现一个拖拽功能。当拖到 iframe 上方时，发现变得卡顿，开始还以为是代码要优化，后来发现是 iframe 搞的鬼。解决方法也很简单，在 mousedown 和 mouseup 给 iframe 添加个样式 function onMouseDown() { document.querySelector('iframe').style['pointer-events'] = 'none' // ... } function onMouseU
div实现拖拽效果，同时包含iframe
bei_fang_du_lang的专栏
03-04 5137
屏蔽iframe对事件的接收和响应，在一个界面中捕获mouseover、mousedown、mouseup事件。 var splitUtil = { x:0, drag:false, startFunc:function(e){ console.log("start"); splitUtil.drag = true; //记录初始位置 splitUtil
当鼠标拖曳事件碰到iframe（卡死了）
听海的博客
09-29 4126
当鼠标拖曳事件碰到iframe，好卡！！！
利用JavaScript实现可拖动iframe的完整教程与代码示例
本文档详细介绍了如何利用JavaScript实现可拖动的iframe页面效果。JavaScript在处理用户交互时发挥着重要作用，特别是在创建动态网页时。可拖动的iframe允许网页中的IFrame元素像窗口一样在浏览器窗口内移动，这对于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值