연결 div 드래그 크기 데모
9949 단어 Web
<html>
<head>
<title> - WEB </title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<style>
{
box-sizing
:
border-box
;
moz-box-sizing
:
border-box
}
#testDiv {
background-color: buttonface;
background-repeat: repeat;
background-attachment: scroll;
color: #3969A5;
height: 300px;
left: 30px;
overflow: hidden;
width: 500;
z-index: 2;
border: 2px outset white;
margin: 0px;
padding: 2px;
background-position: 0% 50%
}
body {
font-family: Verdana;
font-size: 9pt
}
#innerNice {
background-color: white;
background-repeat: repeat;
background-attachment: scroll;
color: #3969A5;
height: 49%;
overflow: auto;
width: 100%;
border: 2px inset white;
padding: 8px;
background-position: 0% 50%
}
#innerNice2 {
background-color: white;
background-repeat: repeat;
background-attachment: scroll;
color: #3969A5;
height: 2%;
overflow: auto;
width: 100%;
border: 1px inset white;
padding: 1px;
background-position: 0% 50%
}
#innerNice1 {
background-color: white;
background-repeat: repeat;
background-attachment: scroll;
color: #3969A5;
height: 49%;
overflow: auto;
width: 100%;
border: 2px inset white;
padding: 8px;
background-position: 0% 50%
}
</style>
<SCRIPT language=javascript>
window.onload=init;
function init(){
divObj1 = document.getElementById("innerNice");
divObj2 = document.getElementById("innerNice1");
}
/////////////////////////////////////////////////////////////////////////
// Generic Resize by Erik Arvidsson //
// //
// You may use this script as long as this disclaimer is remained. //
// See www.dtek.chalmers.se/~d96erik/dhtml/ for mor info //
// //
// How to use this script! //
// Link the script in the HEAD and create a container (DIV, preferable //
// absolute positioned) and add the class="resizeMe" to it. //
/////////////////////////////////////////////////////////////////////////
var divObj1 = null; //This gets a value as soon as a resize start
var divObj2 = null;
var theobject1 = null; //This gets a value as soon as a resize start
var theobject2 = null;
function resizeObject1() {
this.el = null; //pointer to the object
this.dir = ""; //type of current resize (n, s, e, w, ne, nw, se, sw)
this.grabx = null; //Some useful values
this.graby = null;
this.width = null;
this.height = null;
this.left = null;
this.top = null;
}
function resizeObject2() {
this.el = null; //pointer to the object
this.dir = ""; //type of current resize (n, s, e, w, ne, nw, se, sw)
this.grabx = null; //Some useful values
this.graby = null;
this.width = null;
this.height = null;
this.left = null;
this.top = null;
}
//Find out what kind of resize! Return a string inlcluding the directions
function getDirection1(el) {
var xPos, yPos, offset, dir;
dir = "";
yPos = window.event.offsetY;
offset = 8; //The distance from the edge in pixels
if (yPos<offset) dir += "s";
else if (yPos > divObj1.offsetHeight+offset) dir += "n";
document.getElementById("aa").innerHTML = "yPos:"+yPos;
return dir;
}
function getDirection2(el) {
var xPos, yPos, offset, dir;
dir = "";
yPos = window.event.offsetY;
offset = 8; //The distance from the edge in pixels
if (yPos<offset) dir += "s";
else if (yPos > divObj2.offsetHeight-offset) dir += "n";
document.getElementById("bb").innerHTML = "yPos:"+yPos;
return dir;
}
function doDown() {
//alert(" ");
var el = getReal(event.srcElement);
if (el == null) {
theobject1 = null;
theobject2 = null;
return;
}
dir1 = getDirection1(el);
if (dir1 == "") return;
dir2 = getDirection2(el);
if (dir2 == "") return;
theobject1 = new resizeObject1();
theobject2 = new resizeObject2();
theobject1.el = divObj1;
theobject1.dir = dir1;
theobject1.grabx = window.event.clientX;
theobject1.graby = window.event.clientY;
theobject1.width = divObj1.offsetWidth;
theobject1.height = divObj1.offsetHeight;
theobject1.left = divObj1.offsetLeft;
theobject1.top = divObj1.offsetTop;
document.getElementById("cc").innerHTML = "theobject1.grabx:"+theobject1.grabx+";theobject1.graby:"+theobject1.graby+";theobject1.width:"+theobject1.width+";theobject1.height:"+theobject1.height+";theobject1.left:"+theobject1.left+";theobject1.top:"+theobject1.top;
theobject2.el = divObj2;
theobject2.dir = dir2;
theobject2.grabx = window.event.clientX;
theobject2.graby = window.event.clientY + 6 + divObj1.offsetHeight;
theobject2.width = divObj2.offsetWidth;
theobject2.height = divObj2.offsetHeight;
theobject2.left = divObj2.offsetLeft;
theobject2.top = divObj2.offsetTop;
document.getElementById("dd").innerHTML = "theobject2.grabx:"+theobject2.grabx+";theobject2.graby:"+theobject2.graby+";theobject2.width:"+theobject2.width+";theobject2.height:"+theobject2.height+";theobject2.left:"+theobject2.left+";theobject2.top:"+theobject2.top;
window.event.returnValue = false;
window.event.cancelBubble = true;
}
function doUp() {
if (theobject1 != null) {
theobject1 = null;
}
if (theobject2 != null) {
theobject2 = null;
}
}
function doMove() {
var el, xPos, yPos, str, xMin, yMin;
xMin = 8; //The smallest width possible
yMin = 8; // height
el = getReal(event.srcElement);
if (el.className == "resizeMe") {
str = getDirection1(el);
if (str == "") str = "default";
else str += "-resize";
el.style.cursor = str;
}
if(theobject1 != null) {
if (dir1.indexOf("s") != -1)
divObj1.style.height = Math.max(yMin, theobject1.height + window.event.clientY - theobject1.graby) + "px";
if (dir1.indexOf("n") != -1) {
divObj1.style.top=Math.min(theobject1.top+window.event.clientY-theobject1.graby,theobject1.top+theobject1.height-yMin)+"px";
divObj1.style.height = Math.max(yMin, theobject1.height - window.event.clientY + theobject1.graby) + "px";
}
}
if(theobject2 != null) {
if (dir2.indexOf("s") != -1)
divObj2.style.height = Math.max(yMin, theobject2.height - window.event.clientY + theobject1.graby) + "px";
if (dir2.indexOf("n") != -1) {
divObj2.style.height = Math.max(yMin, theobject2.height + window.event.clientY - theobject1.graby) + "px";
}
}
window.event.returnValue = false;
window.event.cancelBubble = true;
}
function getReal(el) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if(temp.id == "innerNice2") {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
document.onmousedown = doDown;
document.onmouseup = doUp;
document.onmousemove = doMove;
</SCRIPT>
<meta content="Microsoft FrontPage 4.0" name="GENERATOR">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<body>
<div id="testDiv">
<div id="innerNice">
<p align="center">
</p>
<p align="center">
<p>
</p>
<p>
</p>
<p>
</p>
</div>
<div id="innerNice2" class="resizeMe"></div>
<div id="innerNice1">
<p align="center">
</p>
<p align="center">
1
<p>
</p>
<p>
</p>
<p>
</p>
</div>
</div>
<div id="aa"></div>
<div id="bb"></div>
<div id="cc"></div>
<div id="dd"></div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fortinet FortiWeb Web Application Firewall Policy BypassFrom: Geffrey Velasquez Date: Wed, 2 May 2012 20:33:23 -0500...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
