Dynamic Context Menu using HTML+TIME

<HTML xmlns:t ="urn:schemas-microsoft-com:time"

xmlns:v = "urn:schemas-microsoft-com:vml" >

<HEAD>

<?IMPORT namespace="t" implementation="#default#time2">

<STYLE>

v:* { BEHAVIOR: url(#DEFAULT#VML)}

BODY {font-family:arial;font-size:80%}

.time {behavior: url(#default#time2)}

.box {position:absolute;top:100;left:100;width:150px;height:22px;

padding:5px;padding-left:15px;display:none;cursor:hand;font-family:arial;}

</STYLE>

// Function is used to animate the menu box movement.

function moveBox(){

var mouseLeft = null;

var mouseTop = null;

// Make the menu boxes visible

oBox.style.display='block';

oBox2.style.display='block';

oBox3.style.display='block';

// Retrieve x and y coordinates of the mouse click

mouseLeft=event.clientX;

mouseTop=event.clientY;

////////////////////////////////////////////////////////////////////////////

// Two t:ANIMATE elements are used for each menu box to control the

// movement of each box. One t:ANIMATE element controls the x-coordinate

// animation and the other controls the y-coordinate animation. The "to"

// properties of the t:ANIMATE elements are set to a value relative to

// the respective x and y coordinates of the mouse click. This ensures

// that the menu boxes animate to the correct location. To begin the

// animation, the t:ANIMATE elements are started on the time line using

// the "beginElement()" method.

/////////////////////////////////// ////////////////////////////////////////

// Code for top menu box animation.

leftMove.to=mouseLeft;

topMove.to=mouseTop;

leftMove.beginElement();

topMove.beginElement();

// Code for middle menu box animation.

leftMove2.to=mouseLeft;

topMove2.to=mouseTop + 29; // notice that y-coordinate is offset

leftMove2.beginElement();

topMove2.beginElement();

// Code for bottom menu box animation.

leftMove3.to=mouseLeft;

topMove3.to=mouseTop + 58;

leftMove3.beginElement();

topMove3.beginElement();

}

// Function is used to hide the menu when clicked.

function closeMenu(){

oBox.style.display='none';

oBox2.style.display='none';

oBox3.style.display='none';

}

</SCRIPT>

</HEAD>

<H2>Dynamic Context Menu using HTML+TIME</H2>

<H2>点右键试试，在不同的位置点右键</H2>

<!-- Here are the menu blocks. Notice the vml behavior is attached to them,

which enables the rounded corners of the menu blocks. -->

<v:ROUNDRECT ID="oBox" CLASS="box" ARCSIZE="90923f" STROKEWEIGHT="2" fillColor='#ffcccc'

onmouseover="this.fillColor='#ffcc00'" onmouseout="this.fillColor='#ffcccc'"

onclick="closeMenu(); alert('hello!');">

Home</v:ROUNDRECT >

<v:ROUNDRECT ID="oBox2" CLASS="box" ARCSIZE="90923f" STROKEWEIGHT="2" fillColor='#ffcccc'

onmouseover="this.fillColor='#ffcc00'" onmouseout="this.fillColor='#ffcccc'"

onclick="closeMenu(); alert('hello 2!');">

Articles</v:ROUNDRECT >

<v:ROUNDRECT ID="oBox3" CLASS="box" ARCSIZE="90923f" STROKEWEIGHT="2" fillColor='#ffcccc'

onmouseover="this.fillColor='#ffcc00'" onmouseout="this.fillColor='#ffcccc'"

onclick="closeMenu(); alert('hello 3!');">

Contacts</v:ROUNDRECT >

<!-- Here are the t:ANIMATE elements which control the animation of the

menu blocks. Notice that the "DUR" attribute values are different for each

pair of elements. This causes the blocks to move at different rates and follow

one another. -->

<t:ANIMATE

ID="leftMove"

TARGETELEMENT="oBox"

ATTRIBUTENAME='left'

BEGIN="indefinite"

DUR=".15" to=""

DECELERATE="1"

FILL="freeze"

onend="this.from=this.to"/>

<!-- Note that when each t:ANIMATE element ends, its "from" property is

updated to the coordinate that the animation ends at. Thus, upon the next

animation, the menu starts its animation from the new location -->

<t:ANIMATE

ID="topMove"

TARGETELEMENT="oBox"

ATTRIBUTENAME='top'

BEGIN="indefinite"

DUR=".15" to=""

DECELERATE="1"

FILL="freeze"

onend="this.from=this.to"/>

<t:ANIMATE

ID="leftMove2"

TARGETELEMENT="oBox2"

ATTRIBUTENAME='left'

BEGIN="indefinite"

DUR=".3" to=""

DECELERATE="1"

FILL="freeze"

onend="this.from=this.to"/>

<t:ANIMATE

ID="topMove2"

TARGETELEMENT="oBox2"

ATTRIBUTENAME='top'

BEGIN="indefinite"

DUR=".3" to=""

DECELERATE="1"

FILL="freeze"

onend="this.from=this.to"/>

<t:ANIMATE

ID="leftMove3"

TARGETELEMENT="oBox3"

ATTRIBUTENAME='left'

BEGIN="indefinite"

DUR=".6" to=""

DECELERATE="1"

FILL="freeze"

onend="this.from=this.to"/>

<t:ANIMATE

ID="topMove3"

TARGETELEMENT="oBox3"

ATTRIBUTENAME='top'

BEGIN="indefinite"

DUR=".6" to=""

DECELERATE="1"

FILL="freeze"

onend="this.from=this.to"/>

</BODY>

</HTML>

posted on 2004-09-22 11:49 Goodspeed 阅读(779) 评论(0) 收藏举报

刷新页面返回顶部

Goodspeed

导航

公告

Dynamic Context Menu using HTML+TIME