案例:拖拽边缘改变窗口(物体)大小

案例:拖拽边缘改变窗口(物体)大小_第1张图片

 

<body> 
  <div id="div1">div>
body>

<style>
  #div1 {width: 100px; height: 100px; background: red; position: absolute; left: 500px; top: 200px;}
style>

<script>
  window.onload = function() {
    
    var oDiv = document.getElementById('div1');
    
    oDiv.onmousedown = function(ev) {
        
        var ev = ev || event;
        
        var disW = this.offsetWidth;
        var disX = ev.clientX;
        var disL = this.offsetLeft;
        
        var b = '';
        
        if ( disX > disL + disW - 10 ) {
            //alert( 'right' );
            b = 'right';
        }
        if ( disX < disL + 10 ) {
            //alert( 'left' );
            b = 'left';
        }
        
        document.onmousemove = function(ev) {
            
            var ev = ev || event;
            
            switch( b ) {
                
                case 'left':
                    oDiv.style.width = disW - ( ev.clientX - disX ) + 'px';
                    oDiv.style.left = disL + ( ev.clientX - disX ) + 'px';
                    break;
                    
                case 'right':
                    oDiv.style.width = disW + ( ev.clientX - disX ) + 'px';
                    break;
                
            }
            
        }
        
        document.onmouseup = function() {
            document.onmousemove = document.onmouseup = null;
        }
        
        return false;
        
    }
    
  }
script>

 

 
  

转载于:https://www.cnblogs.com/chiangyibo/p/6680460.html

你可能感兴趣的:(案例:拖拽边缘改变窗口(物体)大小)