我要评论<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
.con {
display: flex;
height: 100%;
}
.parent-left {
width: 150px;
border-right: 1px solid #000000;
}
.parent-right {
flex: 1;
}
.parent-left,
.parent-right {
height: 100%;
}
.childl,
.childr {
height: 100%;
}
.parlecon,
.parricon {
height: 100%;
width: 99%;
word-break: break-all;
}
.childl:hover {
cursor: w-resize
}
.parlecon:hover {
cursor: auto
}
</style>
</head>
<body>
<div class="con">
<div class="parent-left">
<div class="childl">
<div class="parlecon">
<p>asdasdasdasasdasdas</p>
</div>
</div>
</div>
<div class="parent-right">
<div class="childr">
<div class="parricon">
<p>asdasdasdasasdasdas</p>
</div>
</div>
</div>
</div>
<script src="js/jquery.1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var dragable = false //默认不能拖动
var pagex = $(".childl").width() //鼠标拖动的宽度
//鼠标按下事件
$(".childl").bind('mousedown', function(e) {
dragable = true
//鼠标弹起事件
$(document).bind('mouseup', function(e) {
if (dragable) {
dragable = false
}
})
//鼠标在元素内部移到时不断触发事件
$(document).bind('mousemove', function(e) {
if (dragable) {
pagex = e.pagex
//设置宽度
$(".parent-left").width(pagex)
}
})
//阻止默认事件
e.preventdefault()
})
})
</script>
</body>
</html>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论