Js+DVML很酷的右鍵動畫彈出菜單

2024-09-05 12:19:19

字體：大中小

來源：轉載

供稿：網友

Js+DVML很酷的右鍵動畫彈出菜單，動畫依次出現，很不變的效果，附有代碼說明，方便你以且修改，像按鈕一樣的菜單，比較漂亮。

<HTML xmlns:v><HEAD><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Js+DVML很酷的右鍵動畫彈出菜單</title><STYLE>v/:*{behavior:url(#default#VML);}.menulist{position:static;PADDING-TOP:6;LETTER-SPACING:8;HEIGHT:20;TEXT-ALIGN:center;margin-bottom:-2}</STYLE></head><BODY oncontextmenu='return false'><Script>var menutime1=null,showobjs1=null  //menutime1=循環計時器調用變量,showobjs1=綁定菜單，定時器過程執行時調用function document.onmouseup(){if(event.button==2)menushow(menu2,60,10)}function menushow(showobjs,showwid,showsudu){  //右鍵菜單展開函數 //函數說明:menushow(菜單id,項平均寬度,伸展速度)if(menutime1!=null){clearInterval(menutime1);menutime1=null}showobjs.style.left=event.x;showobjs.style.top=event.y;showobjs1=showobjs.all.tags("roundrect");var showlens=showobjs1.lengthfor(i=0;i<showlens;i++){showobjs1[i].style.width=0;showobjs1[i].style.visibility="hidden"}showobjs.style.display=""menutime1=setInterval("for(i=0;i<"+showlens+";i++){showobjs1[i].style.visibility='';if(showobjs1[i].offsetWidth<"+showwid+"){showobjs1[i].style.width=showobjs1[i].offsetWidth+"+showsudu+";break;}else{if(i=="+(showlens-1)+"){clearInterval(menutime1);menutime1=null}}}",20)}function menuclose(showobjs2,showsudu2){  //右鍵菜單關閉函數 //函數說明:menushow(菜單id,關閉壓縮速度)if(menutime1!=null)return falseshowobjs1=showobjs2.all.tags("roundrect");var showlens=showobjs1.length-1menutime1=setInterval("for(i="+showlens+";i>-1;i--){if(showobjs1[i].offsetWidth>0){try{showobjs1[i].style.width=showobjs1[i].offsetWidth-"+showsudu2+";break;}catch(e){showobjs1[i].style.visibility='hidden';if(i==0){clearInterval(menutime1);menutime1=null}}}}",20)}</script><span id=menu2 style="position:absolute;Z-INDEX:40000;LEFT:395;TOP:210;color:#739EFE;cursor:hand;display:none;font-size:12px;font-family:宋體" onmouseover="if(event.srcElement.tagName=='roundrect'){event.srcElement.strokecolor='blue';event.srcElement.style.color='blue';event.srcElement.style.marginLeft=10}" onmouseout="if(event.srcElement.tagName=='roundrect'){event.srcElement.strokecolor='#739EFE';event.srcElement.style.color='#739EFE';event.srcElement.style.marginLeft=0}"><v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE><v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>ASP</v:roundrect><v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE><v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>PHP</v:roundrect><v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE><v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>JSP</v:roundrect><v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE><v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>DELPHI</v:roundrect><v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE><v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>JSP</v:roundrect><v:roundrect class=menulist arcsize=0.5 strokecolor=#739EFE><v:fill type=gradient opacity=.4 color=#739EFE color2=white angle="50"/>AJAX</v:roundrect></span></body></html>

上一篇：簡潔的滑出菜單

下一篇：鼠標點擊觸發的導航菜單