层Div如何缩放(急，高分回报)？

wangxiaomax 2003-02-14 11:00:14

现在有一个动态生成的层
obj = document.createElement("div");
//层的属性
obj.id ="div"+"Test"; //层的ID
obj.style.top ="100"; //离窗口最上端距离
obj.style.left ="100"; //离窗口最左端距离
obj.style.width ="100"; //层的水平长度
obj.style.height ="100"; //层的垂直长度
obj.style.backgroundColor ="FF0000"; //层的背景颜色
//层的事件
//obj.attachEvent('onclick',changeZindex) //鼠标单击动作
//obj.attachEvent('onmousedown',changeZindex) //鼠标左键按下去动作
document.body.appendChild(obj);
问题如下：鼠标放在层的四周或者交界处，拖动边框可放大或缩小层(跟windows窗口缩放类似)，请各位大侠赐教，分不够可以再加，急用，尽快结帖！！

...全文

91 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

wangxiaomax 2003-02-16

打赏
举报

to platinum(白金):
你说什么啊。骆驼兄的帮助我当然不会忘记了，不过100分肯定不能全给他，因为我没有用他的代码。不知道什么事，不要乱叫。

platinum 2003-02-15

打赏
举报

wangxiaomax(缺省值)，就你这般小肚鸡肠，以后再如何问问题？

fly_miss 2003-02-15

打赏
举报

学习

一声雷响老子闪亮登场 2003-02-15

打赏
举报

申请90分
余下10分给骆驼兄！

emu 2003-02-15

打赏
举报

不把你自己的代码贴出来瞧瞧？

wangxiaomax 2003-02-14

打赏
举报

NS通不过，IE通过。我现在编写的东东两种浏览器都要通过。

wangxiaomax 2003-02-14

打赏
举报

多谢wsj(骆驼)的回复，你的代码也太长了。我先看看代码，等我看得差不多了，如果管用，立刻结帖。

llrock 2003-02-14

打赏
举报

学习

wsj 2003-02-14

打赏
举报

wsj 2003-02-14

打赏
举报

checkit 2003-02-14

打赏
举报

好像没完呀？

wsj 2003-02-14

打赏
举报

//+----------------------------------------------------------------------------
//
// Function: DoPropChange
//
// Description: Runs on the onpropertychange event and calls the necessary
// functions to correctly handle the property that was just
// changed.
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------

function DoPropChange()
{
var propertyName = window.event.propertyName;

//
// Handle CSS property changes by calling necessary functions, setting
// variables, and/or setting styles
//
if (propertyName.substring(0,5) == "style")
{
switch(propertyName)
{
case "style.zIndex" :
normZindex = style.zIndex;
break;

case "style.position" :
style.position = "absolute";
break;

case "style.mvGridRows" :
snapToGrid();
break;

case "style.mvGridCols" :
snapToGrid();
break;

case "style.mvGrid" :
FormatGrid();
break;

case "style.mvBoundaryLeft" :
SetBoundary();
break;

case "style.mvBoundaryTop" :
SetBoundary();
break;

case "style.mvBoundaryRight" :
SetBoundary();
break;

case "style.mvBoundaryBottom" :
SetBoundary();
break;

case "style.mvBoundary" :
FormatBoundary();
break;
}
}
else
{
//
// Detach the onpropertychange event to prevent it from firing while
// the changes are handled
//
detachEvent("onpropertychange", DoPropChange);

switch(propertyName)
{
case "moveable" :
break;

case "direction" :
break;

case "snapable" :
if (snapable == true || snapable == "true") snapToGrid();
break;

case "selectable" :
break;

default :
ReturnError(propertyName + " not a valid property");
break;
}

// Re-attach the onpropertychange event
attachEvent("onpropertychange", DoPropChange);
}
}

//+----------------------------------------------------------------------------
//
// Function: moveTo
//
// Description: Moves the piece to the specified coordinates by calling
// the MoveElement() function.
//
// Arguments: iNewX - Left position to move the piece to
// iNewY - Top position to move the piece to
//
// Returns: true if the moveable property is set to false
// false if iNewX or iNewY do not contain numbers
//
//-----------------------------------------------------------------------------

function moveTo(iNewX, iNewY)
{
if (moveable == false || moveable == "false") return true;

iNewX = parseInt(iNewX);
iNewY = parseInt(iNewY);

if (isNaN(iNewX) && isNaN(iNewY)) return false;

// Call MoveElement to move the piece
MoveElement(iNewX, iNewY);
}

//+----------------------------------------------------------------------------
//
// Function: snapToGrid
//
// Description: Based on the grid established with the mvGridRows and
// mvGridCols properties, snap the piece to the grid.
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------

function snapToGrid()
{
// Call MoveElement to move the piece
MoveElement(offsetLeft, offsetTop, true);
}

//+----------------------------------------------------------------------------
//
// Function: SetBoundary
//
// Description: Move the element within the boundaries specified by the
// mvBoundary properties.
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------

function SetBoundary()
{
// Obey right boundary
if (style.mvBoundaryRight != null
&& style.mvBoundaryRight < style.posLeft + offsetWidth)
{
style.left = style.mvBoundaryRight - offsetWidth;
}

// Obey left boundary
if (style.mvBoundaryLeft
&& style.mvBoundaryLeft > style.posLeft)
{
style.left = style.mvBoundaryLeft;
}

// Obey bottom boundary
if (style.mvBoundaryBottom
&& style.mvBoundaryBottom < style.posTop + offsetHeight)
{
style.top = style.mvBoundaryBottom - offsetHeight;
}

// Obey top boundary
if (style.mvBoundaryTop
&& style.mvBoundaryTop > style.posTop)
{
style.top = style.mvBoundaryTop;
}

// If the element is snapable, call snapToGrid to snap it.
if (snapable == true || snapable == "true") snapToGrid();
}

//+----------------------------------------------------------------------------
//
// Function: MoveElement
//
// Description: Moves the piece to the specified coordinates. If any
// of the mvGrid or mvBoundary properties are set, they are
// enforced.
//
// Arguments: iNewX - Left position to move the piece to
// iNewY - Top position to move the piece to
// bSnapTo - called explicitly from snapToGrid()
//
// Returns: nothing
//
//-----------------------------------------------------------------------------

wsj 2003-02-14

打赏
举报

resizeMgr.htc
------------------

<<PROPERTY NAME="moveable" />
<PROPERTY NAME="direction" />
<PROPERTY NAME="snapable" />
<PROPERTY NAME="selectable" />

<METHOD NAME="moveTo" />
<METHOD NAME="snapToGrid" />

<EVENT NAME="ondrag" ID="drag" />
<EVENT NAME="ondragstart" ID="dragstart" />
<EVENT NAME="ondragend" ID="dragend" />
<EVENT NAME="onerror" ID="error" />

<ATTACH EVENT="onmouseover" HANDLER="DoMouseOver" />
<ATTACH EVENT="onmouseout" HANDLER="DoMouseOut" />

<ATTACH EVENT="onmouseup" HANDLER="DoMouseUp" />
<ATTACH EVENT="onmousedown" HANDLER="DoMouseDown" />
<ATTACH EVENT="onclick" HANDLER="DoSelect" />
<ATTACH EVENT="onselectstart" HANDLER="DoSelect" />
<ATTACH EVENT="ondocumentready" HANDLER="SetDefaults" />

<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />

<SCRIPT LANGUAGE="jscript">
function cleanup()
{
detachEvent("onpropertychange", DoPropChange);
}

//+----------------------------------------------------------------------------
//
// Global Variables
//
//-----------------------------------------------------------------------------

var iOffsetX; // On the dragstart event, this variable is
// set to track the difference between the
// mouse position and the corner of the
// element

var iOffsetY; // Same as iOffsetX, but for Y coordinate
var iOrgWidth;
var iOrgHeight;
var HOT_WIDTH = 10;
var nDrag =0;
var normZindex = style.zIndex; // Tracks the regular zIndex so it can be
// restored once the dragend event occurs

var zBound = new Array // Used for parsing the mvBoundary prop
('Top', 'Right', // into it's four component parts
'Bottom', 'Left');

//+----------------------------------------------------------------------------
//
// Function: SetDefaults
//
// Description: Called during the initialization of the behavior. Sets
// the required settings for CSS properties, the defaults for
// custom CSS properties, and attaches the onpropertychange
// event (not done in the header to prevent firing the event
// during initialization).
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------

function SetDefaults()
{
// Required CSS properties
style.left = offsetLeft;
style.top = offsetTop;
style.position = "absolute";

//
// Set these properties before the individual ones are set next. Thus,
// individual properties will override the container properties here.
//
style['mvBoundary'] = currentStyle['mv--boundary'];
style['mvGrid'] = currentStyle['mv--grid'];

// Custom CSS Property Defaults
CustomDefault('mv--boundary-left','mvBoundaryLeft',null);
CustomDefault('mv--boundary-right','mvBoundaryRight',null);
CustomDefault('mv--boundary-top','mvBoundaryTop',null);
CustomDefault('mv--boundary-bottom','mvBoundaryBottom',null);
CustomDefault('mv--grid-rows','mvGridRows',null);
CustomDefault('mv--grid-cols','mvGridCols',null);

// Format the grid and boundary
FormatGrid();
FormatBoundary();

// Attach the onpropertychange event
attachEvent("onpropertychange", DoPropChange);
}

//+----------------------------------------------------------------------------
//
// Function: CustomDefault
//
// Description: Sets the defaults for custom CSS properties and establishes
// a scriptable name for the property
//
// Arguments: sCSSName - the CSS name of the property
// sScriptName - the desired Scriptable name of the property
// sDefault - the desired default value
//
// Returns: nothing
//
//-----------------------------------------------------------------------------

function CustomDefault(sCSSName, sScriptName, sDefault)
{
if (currentStyle[sCSSName] == null)
{
style[sCSSName] = sDefault;
}
else style[sCSSName] = currentStyle[sCSSName];

style[sScriptName] = style[sCSSName];
}

//+----------------------------------------------------------------------------
//
// Function: FormatGrid
//
// Description: Parse the mvGrid space-delimited string to get mvGridRows
// and mvGridCols
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------

function FormatGrid()
{
if (style['mvGrid'] != null)
{
if (style['mvGridCols'] == null)
{
style['mvGridCols'] = parseInt(style['mvGrid'].substring(
0,style['mvGrid'].indexOf(" ")));
}

if (style['mvGridRows'] == null)
{
style['mvGridRows'] = parseInt(style['mvGrid'].substring(
style['mvGrid'].indexOf(" ")+1,style['mvGrid'].length));
}
}

// Call snapToGrid to enforce new values
snapToGrid();
}

//+----------------------------------------------------------------------------
//
// Function: FormatBoundary
//
// Description: Parse the mvBoundary space-delimited string to get
// mvBoundaryTop, mvBoundaryRight, mvBoundaryBottom, and
// mvBoundaryLeft.
//
// Arguments: none
//
// Returns: nothing
//
//-----------------------------------------------------------------------------

function FormatBoundary()
{
if (style['mvBoundary'] != null)
{
var iStart = 0;
var iEnd = style['mvBoundary'].indexOf(" ");

for (i=0; i<zBound.length; i++)
{
style['mvBoundary' + zBound[i]] =
style['mvBoundary'].substring(iStart,iEnd);

if (iEnd == style['mvBoundary'].length) break;

iStart = iEnd + 1;
iEnd = style['mvBoundary'].indexOf(" ", iStart);
if (iEnd == -1) iEnd = style['mvBoundary'].length;
}
}

SetBoundary();
}

wsj 2003-02-14

打赏
举报

resizeMgrDemo.htm
-----------------------

<HTML xmlns:move>
<HEAD>

<TITLE>ResizeMgr Demo</TITLE>

</HEAD>
<script>
var oBehaviorID;
function EnableIt()
{
oHost.style.mvBoundary = "10 550 250 10"; //CSS: mv--Boundary
oHost.style.mvGrid = "10 10"; //CSS: mv--Grid

oBehaviorID = oHost.addBehavior("resizeMgr.htc");
}
function DisableIt()
{
oHost.removeBehavior(oBehaviorID);
}
</script>
<BODY bgcolor="#ffffff" text="#000000">
<H2>ResizeMgr Demo</H2>
<HR>
<P> Resize and Drag the Box (an Host).</P>
<input value="Enable ResizeMgr to The Box" type=button onclick="EnableIt()" id=button1 name=button1></input>
<input value="Remove ResizeMgr from The Box" type=button onclick="DisableIt()" id=button1 name=button1></input>

<P>
<SPAN ID="oHost" style="position:absolute; border:thin outset; left:300; top:200; width:250; height:150; backgroundColor:#cccccc">
<DIV ID="oInner" style="border:thin inset; width:100%; height:100%; backgroundColor:#888888">
<DIV ID="DragMe" style="background-Color:#0000ff; width:100%; height:20; left:0; top:0">
</DIV>
</DIV>
</SPAN>

<P>
<P>
<P>
<P>
<P>
<P>
<P>
<P>
<P>
<P>
<P>
<P>
<P>
<P>
<P>

<HR>
</BODY>
</HTML>

wangxiaomax 2003-02-14