<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>左侧菜单栏滑动效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
padding: 0 0;
margin: 0 0;
}
#main {
width: 100%;
height: 100%;
}
#left {
background: #eee;
position: absolute;
width: 280px;
height: 100%;
}
#line {
background: skyblue;
position: absolute;
left: 280px;
width: 4px;
height: 100%;
cursor: col-resize;
}
#right {
background: yellow;
position: absolute;
right: 0;
width: calc(100% - 284px);
height: 100%;
}
</style>
</head>
<body>
<div id="main">
<div id="left">left</div>
<div id="line"></div>
<div id="right">right</div>
</div>
<script>
let left = document.getElementById('left')
let line = document.getElementById('line')
let right = document.getElementById('right')
let bodyWidth = document.body.clientWidth
let leftMaxWidth = document.body.clientWidth - 200
line.onmousedown = function (e) {
document.onmousemove = function (e) {
if (e.clientX > 280 && e.clientX < leftMaxWidth) {
left.style.width = e.clientX + 'px'
line.style.left = e.clientX + 'px'
right.style.width = "calc(100% - " + e.clientX + "px - 4px)"
}
return false
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
}
</script>
</body>
</html>
JS 左侧菜单栏滑动效果
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 使用Fragment实现SlidingMenu: 1.首先Activity继承自SlidingMenu包下的Sli...
- 本博客将在 6月底停止在 简书的更新,全新的博客地址请点击前往-> 君赏博客 本文章文字大约 4500字,大概花费...