JS实现拖拽和拉伸的实例

琪公子呀

已于 2022-05-27 16:43:00 修改

阅读量1.2k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 html css3

于 2022-03-26 13:53:45 首次发布

本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/123754745

版权

进去的页面这个样子，其中可以左右，上下移动，进行拖拽，也可以点击进行页面的隐藏

在菜单这里加了个鼠标移入移出功能，页面是这样

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>home</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		html {
			width: 100%;
			height: 100%;
		}

		/* 头部--导航栏 */
		.home_top {
			width: 100%;
			height: 55px;
			position: absolute;
			background-color:  rgb(44, 120, 191);
		}

		.imgDiv {
			width: 250px;
			height: 55px;
			line-height: 55px;
			background-color: #fff;
		}

		.imgDiv img {
			width: 100%;
			height: 100%;
		}

		.totalButton {
			width: 55px;
			height: 55px;
			border-radius: 50%;
			position: relative;
			top: -55px;
			left: 250px;
			z-index: 100;
		}
		.totalButton img{
			width: 100%;
			height: 100%;
		}
		/* 中部内容区 */
		.home_foot{
			width: 100%;
			height: 91.6%;
			position: absolute;
			top:55px;
		}
		.box {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
        }
        .left {
            width: 20%;
            height: 100%;
            flex: 1;
            overflow: hidden;
            background-color: pink;
        }
        .line {
            width: 10px;
            background: lightblue;
            cursor: col-resize;
        }

        .line a {
            position: absolute;
			top: 44%;
			display: block;
			cursor: pointer;
			width: 10px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			color: white;
			background-color: #666;
        }
		.right {
			position: relative;
			width: 80%;
			overflow: hidden;
		}

		.right div {
			position: absolute;
			width: 100%;
		}

		.top {
			background: green;
			height: 100%;
			overflow: hidden;
		}
		.bottom {
			height: 100%;
			overflow: hidden;
			background: yellow;
			top: 60%;
			margin-top: 10px;
		}

		.line_2 {
			top: 60%;
			height: 10px;
			overflow: hidden;
			background: lightblue;
			cursor: row-resize;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.line_2 span{
			display: block;
			height: 10px;
			width: 10px;
		}
		.line1_2, .line1_3{
			cursor: pointer;
			display: block;
			width: 100px;
			height: 10px;
			line-height: 10px;
			text-align: center;
			color: white;
			background-color: #666;
		}
		/* 菜单选项 --------------------------------------------------------------------------------- */
		.meue {
			position: absolute;
			top: 50px;
			left: 20px;
			width: 870px;
			height: 420px;
			z-index: 100;
			display: none;
		}

		.meue_top {
			width: 100%;
			height: 30px;
		}

		.meue_top ul {
			width: 100%;
		}

		.meue_