<script?type="text/javascript">
?????function?g(id){return?document.getElementById(id)}
??????var?mouseOffsetX?=?0;
??????var?mouseOffsetY?=?0;
??????isDraging?=?false;
?????g('boxR').onmousedown?=?function(e){
???????var?e?=e;
????????mouseOffsetX?=?e.clientX?-?g('boxR').offsetLeft;
????????mouseOffsetY?=?e.clientY?-?g('boxR').offsetTop;
????????isDraging?=?true;
?????}
?????document.onmousemove?=function(e){
???????var?e?=?e;
???????var?moveX?=?0;
???????var?moveY?=?0;
???????if?(isDraging?===?true)?{
???????????moveX?=?e.clientX?-?mouseOffsetX;
???????????moveY?=?e.clientY?-?mouseOffsetY;
???????????g('box').style.width?=?moveX?+?'px';
???????????g('box').style.height?=?moveY?+?'px';
???????}
?????}
?????document.onmouseup?=function(e){
???????isDraging?=?false;
?????}???
????</script>?上面是js部分。<div?class="box"?id="box">
??????<div?class="boxL"?id="boxL"></div>
??????<div?class="boxT"?id="oxT"></div>
??????<div?class="boxR"?id="boxR"></div>
??????<div?class="boxB"?id="oxB"></div>
??????<div?class="boxLT"?id="boxLT"></div>
??????<div?class="boxRT"?id="boxRT"></div>
??????<div?class="boxLB"?id="boxLB"></div>
??????<div?class="boxRB"?id="boxRB"></div>
????</div>上面是html部分<style?media="screen">
??????.box{width:?200px;height:?200px;position:?absolute;left:?100px;top:?100px;border:?1px?solid?black;}
??????.boxL,.boxR,.boxT,.boxB,.boxLT,.boxRT,.boxRB,.boxLB{position:?absolute;}
??????.boxL{left:?0;top:50%;width:?10px;height:10px;cursor:?w-resize;background:red;}
??????.boxT{top:?0;left:50%;width:10px;height:10px;cursor:?n-resize;background:red;}
??????.boxR{right:0;top:50%;width:10px;height:10px;cursor:?e-resize;background:red;}
??????.boxB{bottom:?0;left:50%;width:10px;height:10px;cursor:?s-resize;background:red;}
??????.boxLT{left:0;top:0;width:10px;height:10px;background:red;cursor:nw-resize;}
??????.boxRT{width:?10px;height:10px;cursor:ne-resize;background:red;right:0;top:?0;}
??????.boxLB{width:?10px;height:10px;cursor:sw-resize;background:red;left:0;bottom:0;}
??????.boxRB{width:?10px;height:10px;cursor:se-resize;background:red;right:0;bottom:0;}
????</style>上面是css部分,求大神們解惑,
完成了一個點(diǎn)觸發(fā)div縮放功能,請問如何完成8個點(diǎn)的觸發(fā)?
葡萄3
2016-08-25 11:07:14