Athos
Monday, February 07, 2005
 
Javascript VML menu
<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>

<SCRIPT>
// 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>
<STYLE TYPE="text/css">
PRE.clsCode { font-size:110%; }
PRE.clsSyntax { font-size:100%; }
TD DIV.clsBeta { display:none;}
MSHelp\:link {
color:#0000ff;
text-decoration:underline;
cursor:hand;
hoverColor:#3366ff;
filterString: ;}
</STYLE>
</HEAD>
<!-- The "oncontextmenu" event is used to make the menu become visible and animate. -->
<BODY oncontextmenu="moveBox(); return false;" onclick="closeMenu();">

<DIV ID="home" STYLE="border:2px solid black; padding:10px;position:relative;width:300px; margin:10px;
height:100px; background:#66CC66;color:white;">
<H1 style="color:white">主页</H1>
</DIV>
<DIV ID="articles" STYLE="border:2px solid black; padding:10px;position:relative;width:300px; margin:10px;
height:100px;background:#3366cc;color:white;display:none;">
<H1 style="color:white">文章</H1>
</DIV>
<DIV ID="contacts" STYLE="border:2px solid black; padding:10px; position:relative; width:300px; margin:10px;
height:100px; background:#ff3300; color:white; display:none">
<H1 style="color:white">联系方式</H1>
</DIV>
<!-- 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"
onmouseover="this.fillColor='#ffcc00'" onmouseout="this.fillColor='#ffffff'"
onclick="home.style.display='block';
articles.style.display='none'; contacts.style.display='none'; closeMenu()">
主页</v:ROUNDRECT >

<v:ROUNDRECT ID="oBox2" CLASS="box" ARCSIZE="90923f" STROKEWEIGHT="2"
onmouseover="this.fillColor='#ffcc00'" onmouseout="this.fillColor='#ffffff'"
onclick="home.style.display='none'; articles.style.display='block';
contacts.style.display='none'; closeMenu()">
文章</v:ROUNDRECT >

<v:ROUNDRECT ID="oBox3" CLASS="box" ARCSIZE="90923f" STROKEWEIGHT="2"
onmouseover="this.fillColor='#ffcc00'" onmouseout="this.fillColor='#ffffff'"
onclick="home.style.display='none'; articles.style.display='none';
contacts.style.display='block'; closeMenu()">
联系方式</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"/>

<!-- Copyright -->

</BODY>
</HTML>


- posted by JaneAthos @ 2/07/2005 06:25:00 PM
Comments:
жесткое порно зоо
students porno
секс пары г тольятти
порно знаменитостей
армянские девушки порно
# posted by Anonymous Anonymous : Sun Jan 17, 06:13:00 AM 2010
 
Post a Comment

<< Home

Powered by Blogger