html 单击并拖动调整大小div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 单击并拖动调整大小div相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>temptitle</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
<!--
var curHeight=0
var curPos=0
var newPos=0
//global var to track mouse button status
var mouseStatus='up'
//set the initial position of the resize-bar
function setPos(e){
curevent=(typeof event=='undefined'?e:event)
mouseStatus='down'
curPos=curevent.clientY
tempHeight=document.getElementById('mydiv').style.height
heightArray=tempHeight.split('p')
curHeight=parseInt(heightArray[0])
}
//reset the position of the resize-bar when the mouse moves while button down
function getPos(e){
if(mouseStatus=='down'){
curevent=(typeof event=='undefined'?e:event)
newPos=curevent.clientY
var pxMove=parseInt(newPos-curPos)
var newHeight=parseInt(curHeight+pxMove)
newHeight=(newHeight<5?5:newHeight)
document.getElementById('mydiv').style.height=newHeight+'px'
}
}
//-->
</script>
<style type="text/css">
#main {margin-top:10px;}
h1,select,textarea,button { margin-left: 10px;}
body {height:100%;}
#mydiv {
font-family: arial,helvetica,sans-serif;
position:relative;
margin: 0 0 0 10px;
top:0px;
left:0px;
width:350px;
border: 1px solid #808080;
overflow: auto;
}
#statusbar {
cursor: s-resize;
position:relative;
display:block;
background: #c0c0c0 url(images/vscroll1.gif) no-repeat top center;
font-size: 0px;
margin:0 0 0 10px;
height:25px;
border: 1px solid #808080;
padding:0;
width: 350px;
}
</style>
</head>
<!--note that onmouseup, global var mouseStatus is set to 'up' //-->
<body onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<h1>Drag Resize Div</h1>
<p>This example shows a div that is resizeable via click and drag. Clicking on the resize-bar sets the initial resize-bar position. Moving the mouse over the body (including child elements) resets the position of the resize-bar, which changes the height of the div.</p>
<div id="mydiv" style="height: 250px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas aliquam massa sed dui. Aliquam ornare metus a purus. Nullam pellentesque, tellus at viverra pellentesque, lorem dolor placerat lectus, vitae suscipit augue lorem eu est. Phasellus laoreet. Mauris tempus. Sed malesuada suscipit lacus. Fusce enim magna, pharetra sed, tincidunt at, gravida auctor, neque. Curabitur quis felis eu libero commodo sollicitudin. </p>
<p>Proin sodales condimentum lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam ante nunc, tempus vitae, convallis blandit, dignissim eu, libero. Nulla facilisi. Donec vestibulum tortor eget metus. Curabitur facilisis, massa in auctor mattis, turpis augue posuere ipsum, quis mattis elit turpis non dolor. In augue purus, semper eget, congue et, tincidunt nec, est. Suspendisse auctor quam sit amet pede. Phasellus vel mi. Donec sed pede. Donec feugiat arcu ut massa.</p>
</div>
<div onmousedown="setPos(event)" id="statusbar" ></div>
</body>
</html>
以上是关于html 单击并拖动调整大小div的主要内容，如果未能解决你的问题，请参考以下文章
在 Javascript FireFox 中不允许通过拖动来调整 div 的大小