JS实现div宽度、高度拉伸

最新推荐文章于 2024-03-25 16:10:04 发布

MrLucky25

最新推荐文章于 2024-03-25 16:10:04 发布

阅读量4.1k

点赞数 2

分类专栏： JavaScript 文章标签：拉伸增减宽度

本文链接：https://blog.csdn.net/prey1025/article/details/100663109

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、JavaScript实现宽度高度自动缓慢拉伸

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style type="text/css">
        #testDiv {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        #statusShow {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript">
        var addObj;
        var reduceObj;
        var testDiv;
        var divwidth;
        var divheight;
        function addRect() {
            divwidth = testDiv.clientWidth;
            divheight = testDiv.clientHeight;
            if (divwidth <= 500 && divheight <= 500) {
                divwidth += 1;
                divheight += 1;
                testDiv.style.width = divwidth + "px";
                testDiv.style.height = divheight + "px";
            }
        }
        function reduceRect() {
            divwidth = testDiv.clientWidth;
            divheight = testDiv.clientHeight;
            if (divwidth >= 200 && divheight >= 200) {
                divwidth -= 1;
                divheight -= 1;
                testDiv.style.width = divwidth + "px";
                testDiv.style.height = divheight + "px";
            }
        }
        window.onload = function () {
            addObj = document.getElementById("add");
            reduceObj = document.getElementById("reduce");
            testDiv = document.getElementById("testDiv");
            addObj.onclick = function () {
                setInterval(addRect, 1);
            }
            reduceObj.onclick = function () {
                setInterval(reduceRect, 1);
            }
        }
    </script>
</head>

<body>
    <div id="testDiv">
    </div>
    <button id="add">增加</button>
    <button id="reduce">减少</button>
</body>

</html>

二、Jquery实现div宽度拉伸

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>RunJS 演示代码</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            position: absolute;
            float: left;
            height: 500px;
        }
        div.left {
            background-color: red;
            width: 200px;
            left: 0px;
        }
        div.center {
            background-color: yellow;
            width: 200px;
            right: 205px;
            float: right;
        }
        div.handler {
            width: 5px;
            cursor: col-resize;
            background-color: blue;
            z-index: 1;
            left: 200px;
        }
    </style>
    <script class="jquery library" src="./jquery-2.1.4.min.js" type="text/javascript"></script>
    <script>
        window.onload = function () {
            var doc = $(document), dl = $("div.left"), dc = $("div.center");
            var sum = dl.width() + dc.width();
            $("div.handler").mousedown(function (e) {
                var me = $(this);
                console.log(me);

                var deltaX = e.clientX
                    -
                    (parseFloat(me.css("left")) || parseFloat(me.prop("clientLeft")));
                doc.mousemove(function (e) {
                    var lt = e.clientX - deltaX;
                    lt = lt < 200 ? 200 : lt; //最小宽度200px
                    lt = lt > sum - me.width() ? sum - me.width() : lt;
                    me.css("left", lt + "px");
                    dl.width(lt);
                    dc.width(sum - lt - me.width());
                });
            }).width();
            doc.mouseup(function () {
                doc.unbind("mousemove");
            });
            doc[0].ondragstart
                = doc[0].onselectstart
                = function () {
                    return false;
                };
        }
    </script>
</head>

<body>
    <div class="left" id="left">
        同时在线人数：1000
        点击刷新
    </div>
    <div class="handler" id="handler">
    </div>
    <div class="center" id="center">
        sss
    </div>
</body>

</html>

三、Vue+TS实现div宽度拉伸

<template>
  <div>
    <div class="left" id="left">
      同时在线人数：1000
      点击刷新
    </div>
    <div class="handler" id="handler" @mousedown="drag">
    </div>
    <div class="center" id="center">
      sss
    </div>
  </div>
</template>

<script >
// export default {
//   components: {},
//   computed: {
//   },
//   methods: {
//     drag: function (e, index) {

//       var Left = e.target.parentNode.children[0],
//         leftW = Left.offsetWidth,
//         startX = e.clientX;

//       document.onmousemove = function (e) {
//         e.preventDefault();
//         var distX = e.clientX - startX;
//         Left.style.width = leftW + distX + 'px';
//         handler.style.left = leftW + distX + "px";
//         if (parseInt(Left.style.width) >= 280) {
//           Left.style.width = 280 + 'px';
//           handler.style.left = 280 + "px";
//         }
//       }

//       document.onmouseup = function () {
//         document.onmousemove = null;
//       }
//     }
//   },
//   mounted() { }
// };

</script>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {}
})
export default class Index extends Vue {
    private drag(e: any) {
    // const left = e.target.parentNode.children[0];
    // const handler = e.target.parentNode.children[1];
    const handler = document.getElementById('handler') as HTMLElement;
    const Left = document.getElementById('left') as HTMLElement;
    const center = document.getElementById('center') as HTMLElement;
    const leftW = Left.offsetWidth;
    const startX = e.clientX;


    document.onmousemove = function (e) {
      e.preventDefault();
      const distX = e.clientX - startX;
      
      let moveWidth = leftW + distX;
      moveWidth = moveWidth < 180 ? 180 : moveWidth; //设置最小宽度
      moveWidth = moveWidth > 280 ? 280 : moveWidth; //最大宽度

      Left.style.width = moveWidth + 'px';
      handler.style.left = moveWidth + "px";
      center.style.left = moveWidth + "px";
    }

    document.onmouseup = function () {
      document.onmousemove = null;
    }
  }
}
</script>
 <style>
* {
  margin: 0;
  padding: 0;
}
div {
  position: absolute;
  float: left;
  height: 500px;
}
div.left {
  background-color: red;
  width: 200px;
  left: 0px;
}
div.center {
  background-color: yellow;
  width: 200px;
  right: 205px;
  float: right;
}
div.handler {
  width: 5px;
  cursor: col-resize;
  background-color: blue;
  z-index: 1;
  left: 200px;
}
</style>

MrLucky25

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JS实现div宽度、高度拉伸

一、JavaScript实现宽度高度自动缓慢拉伸<!DOCTYPE html><html><head> <meta charset="utf-8" /> <style type="text/css"> #testDiv { width: 200px; ...
复制链接

扫一扫