菜单只是动画效果,并不是悬浮的?悬浮菜单可参考:
http://www.elong.com/hotels/search.aspx?ischina=1&raCityName=Beijing&price=-1&star=-1&CheckInDate=2005-5-12&CheckOutDate=2005-5-13&HotelName=&srh_type=0&psgtype=0&psgnum=1&imageField.x=38&imageField.y=13代码:查看源码
http://www.elong.com/hotels/search.aspx?ischina=1&raCityName=Beijing&price=-1&star=-1&CheckInDate=2005-5-12&CheckOutDate=2005-5-13&HotelName=&srh_type=0&psgtype=0&psgnum=1&imageField.x=38&imageField.y=13代码:查看源码
解决方案 »
- 不用jquery插件,自己用jquery写的表单验证!
- 发帖求助,关于Toolbar的style问题
- 怎么样遍历js 对象属性,控制循环次数?
- 请教 菜单问题?他这个是怎么做的?有源码不?
- XML文件格式问题
- 请问iframe父窗口调用跳转后的子窗口里面的方法该怎么实现?
- JavaScript打开新窗口问题
- 如何利用JS实现对这样的frame框架结构的大小的控制?
- 请问如何得到某个表中的一个按纽在单击时,这个按纽所在单元格的行数
- 求一个图片滚动+鼠标悬浮显示DIV层的效果、、、
- 我的页面上有很多的表格,能否针对某一特定表格内的内容进行打印?
- 如何点击<input>后弹出一个层,然后点击该层以外出可关闭此层
<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>
</HEAD>
<!-- The "oncontextmenu" event is used to make the menu become visible and animate. -->
<BODY oncontextmenu="moveBox(); return false;" onclick="closeMenu();">
<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>
你的意思是把屏幕重新写一次,这样的话,相当于重新写屏,屏幕会抖动。能不能做到象点菜单那样,直接在左边弹出菜单,不是动画的也可以?