zoukankan      html  css  js  c++  java
  • 窗口大小左右拖动demo

    效果:

    代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #div1{
                     100px;
                    height: 100px;
                    background: skyblue;
                    position: absolute;
                    left: 500px;
                    top:200px;
                    
                }
            </style>
        </head>
        <body>
            <script type="text/javascript">
              window.onload = function()
              {
                   var oDiv = document.getElementById("div1") ;
                   oDiv.onmousedown = function(ev)
                   {
                         var ev = ev || event;
                         var b = "";
                         var disX = ev.clientX ;
                         var disW = this.offsetWidth;
                         var disL = this.offsetLeft;
                         
                         if(disX > this.offsetLeft + disW -10)
                         {
                              b = "right";
                         }
                         if(disX < this.offsetLeft + 10)
                         {
                              b ="left";
                         }
                         document.onmousemove = function(ev)
                         {
                             var ev = ev || event;
                              switch(b)
                              {
                                   case 'left':
                                   //向左扩展要考虑 鼠标点移入距离的偏移值 默认为右方向。
                                   //同时必须改变div的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>
            <div id="div1"></div>
        </body>
    </html>
  • 相关阅读:
    Mac下各种编程环境的配置问题(python java)
    hackintosh和windows时区问题
    CAN波特率计算公式
    Jetson nano 安装 TensorFlow
    python逻辑运算符优先级
    CSS知识点(一)
    HTML标签(二)
    python2与python3的区别
    HTML标签(一)
    IO多路复用和协程
  • 原文地址:https://www.cnblogs.com/h5monkey/p/6673904.html
Copyright © 2011-2022 走看看