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>
  • 相关阅读:
    Centos7 JDK8安装配置
    select2
    docker 删除多个退出的容器
    redis 批量删除多个key
    Dockerfile 文件命令
    Docker部署go示例
    php 导入 excel 文件
    rabbitmq安装
    rabbitmq之php客户端使用实例
    k8s
  • 原文地址:https://www.cnblogs.com/h5monkey/p/6673904.html
Copyright © 2011-2022 走看看