一种在视频OBJECT标签上放置均分四个区域的框选方法

时间：2021-04-03 03:12:02

一般在视频区域中做框样式，作应由视频插件自己来实现，但是出于其它一些原因自己琢磨了一个使用HTML标签来实现框选区域的方法，按照行外应该属于笨方法，虽然有点笨，可能在其他方面有借鉴意义，在这里拿出来跟大家分享。

对于一个视频插件OBJECT，每个边从中间点均分两份， 两个相对边的中间点之间的连线也按中间点分为两份，对于每一份定义一个div标签与其对应，为了保证每份的长度不写死，使其依赖于边的宽和高，定义每份的长度为 50%，宽度定义为1px。 使用绝对定位将每份的div，对应到视频对象的边上。

同时由于OBJECT属于窗口级别对象，对于任意div都不能显示在上层，即时定义z-index属性。为解决这个问题，经过查证后，在div内部预置一个<iframe>标签则可以解决这个问题。

下面给出演示代码，在chrome下可以看见框选有效，其样式需要再调节。

<html>

<body>

<div style="position:absolute; left:50%; top:50%; margin-left:-100; margin-top:-100; width:200px; height:200px;"> 

<object style="position:absolute; top:0px; left:0px;" height="200px" width="200px" type="image/jpeg" data="./meinv.jpg">

</object>

<!-- top left -->

<div id="BoxBorder_topLeft" style="width:50%; height:1px; position:absolute; top:0px; left:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- top right -->

<div id="BoxBorder_topRight" style="width:50%; height:1px; position:absolute; top:0px; left:50%; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- right top -->

<div id="BoxBorder_rightTop" style="width:1px; height:50%; position:absolute; top:0px; right:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- right down -->

<div id="BoxBorder_rightDown" style="width:1px; height:50%; position:absolute; top:50%; right:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- bottom left -->

<div id="BoxBorder_bottomLeft" style="width:50%; height:1px; position:absolute; bottom:0px; left:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- bottom right -->

<div id="BoxBorder_bottomRight" style="width:50%; height:1px; position:absolute; bottom:0px; right:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- left top -->

<div id="BoxBorder_leftTop" style="width:1px; height:50%; position:absolute; top:0px; left:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- left down -->

<div id="BoxBorder_leftDown" style="width:1px; height:50%; position:absolute; top:50%; left:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- vertical up -->

<div id="BoxBorder_verticalUp" style="width:1px; height:50%; position:absolute; left:50%; top:0px; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- vertical down -->

<div id="BoxBorder_verticalDown" style="width:1px; height:50%; position:absolute; left:50%; top:50%; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- horizon left -->

<div id="BoxBorder_horizonLeft" style="width:50%; height:1px; position:absolute; left:0px; top:50%; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<!-- horizon right -->

<div id="BoxBorder_horizonRight" style="width:50%; height:1px; position:absolute; left:50%; top:50%; ">

 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>

 <div style="width:100%; height:100%; background:red;"></div>

</div>

<script>window.createPopup();</script>

</div>

</body>

</html>

相关文章