利用浮动+margin实现 左右布局 并用js实现可拖动分隔条 并用cookies记住宽度
代码:
<style>
body{margin:0px;padding:0px;}
.body{height:100%}
.left{
height:100%;
background-color:whitesmoke;
width: 300px;
float: left;
}
.fenge{
height:100%;
width: 10px;
background-color:#F0F0F0;
float: left;
cursor:col-resize;
border-left:1px solid #FFFFFF;
border-right:1px solid #828790;
}
.right{
height:100%;
background-color:whitesmoke;
margin-left:310px;
}
</style>
<div class="body">
<div class="left"></div>
<div class="fenge"></div>
<div class="right">asd</div>
</div>
<script>
//定义设置cookies和取cookies的函数
function getCookieByName(name){for(item of document.cookie.split(';')){if(item.trim().substr(0,name.length+1)==name+"="){return item.trim().substr(name.length+1);}}return "";}
function setCookie(name,value,days=30){var d = new Date();d.setTime(d.getTime()+(days*24*60*60*1000));var expires = "expires="+d.toGMTString();document.cookie = name+"="+value+"; "+expires;}
//定义事件函数
function drag(e){
document.selection ? document.selection.empty() : window.getSelection().removeAllRanges();
left.style.width = (e.pageX - bar.offsetWidth / 2) + 'px';
right.style.marginLeft=(e.pageX - bar.offsetWidth / 2)+10+"px"
}
//获取 左右和分割条三个元素
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var bar = document.querySelector('.fenge');
document.querySelector(".fenge").addEventListener("mousedown",function(){//鼠标被按下
document.addEventListener('mousemove',drag); //给document添加鼠标移动事件
})
document.querySelector(".fenge").addEventListener("mouseup",function(){//鼠标被松开
document.removeEventListener('mousemove', drag); //给document解绑鼠标移动事件
setCookie("leftwidth",left.style.width.replaceAll("px",""));//使用cookie记录拖动后的宽度
})
//如果cookies存在 就读取cookies记录的宽度
leftwidth=getCookieByName('leftwidth');
if(leftwidth>0){
left.style.width = leftwidth + 'px';
right.style.marginLeft=Number(leftwidth)+10+"px"
}
</script>相关推荐
javascript原生js实现html中checkbox复选框按shift多选/全选/反选 取被勾选的id纯原生JavaScript代码 无需任何库整理后 可以直接拿来用的代码<input type='checkbox' name='cateid[]'> <
html中select option原生javascript按照value值 或 按照文本 选择指定选项function select_value(id,value){//按照option的值来选择 selectdom=document.getElementById(id); option=sele
原生js,原生javascript写的开关按钮<style> td,table{border:1px solid #323841;} </style> <form method="get" act
Xmlhttprequest：原生javascript的ajax 发送GEt请求 和 post请求get请求function zhankai(id){/*函数:展开某个分类*/ var httpRequest = new XMLHttpRequest () ; httpRequest.open
style对象全部属性fontFamilyfontStylefontVariantfontWeightfontSizefontcolorbackgroundbackgroundColorbackgroundImagebac
javascript parseint()函数用法 - 字符串到整数定义和用法parseInt() 函数可解析一个字符串，并返回一个整数。当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。当忽略参数 ra
javascript设置网页 cookies和取cookies//取cookies function getCookieByName(name){ for(item of document.cookie.split(';')){ if(it
javascript变量声明之:let的使用 for循环中 var和let的区别在for循环中 var 和 let的区别<script> //var方式的循环 for (var i=0; i<3; i++){ //要循环执行的代码 } console.log
javascript 解析json解析 遍历代码:obj=JSON.parse('{"id":"8","home":"beijing","uid&
javascript取元素高度 宽度 水平位置 垂直位置包括边框element.offsetHeight 返回元素的高度。 (包括边框)element.offsetWidth 返回元素的宽度。 element.offsetLeft 返回元素的水平