土拨鼠1号 2021-04-06 09:54 采纳率: 59.4%
浏览 74
已采纳

Markdown 编辑器:全屏功能限制作用域

markdown编辑器的这个全屏功能,默认采取的高度与宽度为window的宽高,怎样去限定或者修改这个数值,将全屏功能限定在我指定的一个div内

  • 写回答

3条回答 默认 最新

  • 空城机 2021-04-06 13:49
    关注

    应该是类似这种吧 

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			#a {
    				width: 300px;
    				height: 200px;
    				border: 1px solid yellow;
    				position: relative;
    			}
    			#b {
    				width: 200px;
    				height: 100px;
    				background-color: #0000FF;
    				position: absolute;
    				transform-origin:left top;
    			}
    			#c {
    				width: 40px;
    				height: 20px;
    				border: 1px solid green;
    				background-color: papayawhip;
    			}
    			#d {
    				width: 800px;
    				height: 600px;
    				border: 1px solid red;
    				position: absolute;
    				left: 320px;
    				top: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="a">
    			<div id="b">
    				<div id="c" onclick="fullScreen()">放大</div>
    				1111111111
    			</div>
    		</div>
    		
    		<div id="d">
    			<!-- 需要全屏放大的位置 -->
    		</div>
    		<script type="text/javascript">
    			let isfull = false;
    			function fullScreen() {
    				let doc = document;
    				if (!isfull) {
    					let rateX = parseInt(doc.getElementById("d").clientWidth) / parseInt(doc.getElementById("b").clientWidth);
    					let rateY = parseInt(doc.getElementById("d").clientHeight) / parseInt(doc.getElementById("b").clientHeight);
    					doc.getElementById("b").style.transform = `scale(${rateX},${rateY})`
    					doc.getElementById("d").appendChild(doc.getElementById("b"))
    					isfull = !isfull
    				} else {
    					doc.getElementById("b").style.transform = `scale(1, 1)`
    					doc.getElementById("a").appendChild(doc.getElementById("b"))
    					isfull = !isfull
    				}
    			}
    		</script>
    	</body>
    </html>
    

     

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥20 qt中connect两个signal
  • ¥20 pix2pixHD运行测试命令时出现数据类型错误无法反向传播的问题
  • ¥15 python处理Excel符合条件的行自动填写数据分类
  • ¥15 汇编hook举例并讲解(通俗易懂,学习用)
  • ¥20 用c++语言模拟键盘电子琴设计
  • ¥15 STM32cubemx生成keil工程,有问题与正常的情况不同,求解!
  • ¥15 如何自动点击银行app的安全键盘,实现密码自动输入
  • ¥15 关于四边形重叠的问题
  • ¥15 用verilog语言设计一个简易的八音符电子琴,可通过按键输入来控制音响。演奏时可以选择是手演奏(由键盘输入)或自动演奏已存入的乐曲。能够自动演奏多首乐曲,且每首乐曲可重复演奏
  • ¥15 sap gui脚本每次到导出Excel的时候就停住不动。不会另存为。