<div class="bar" id="menubar">
<div class="menu" id="menu0">
</div>
<div class="menu" id="menu1">
</div>
<div class="menu" id="menu2">
</div>
</div>
.bar{
width:px;
height:px;
border:px solid #ccc;
border-radius:%;
position:fixed;
top:px;
right:px;
z-index:;
cursor:pointer;
}
.menu{
width:px;
height:px;
background-color:#ccc;
position:absolute;
transform:translated(-%,-%,);
left:%;
transition:all .s cubic-bezier(., ., ., .) s
}
#menu{
top:%;
}
#menu{
top:%;
}
#menu{
top:%;
}
window.onload = function () {
var menubar = document.getElementById("menubar");
var menu = document.getElementById("menu");
var menu = document.getElementById("menu");
var menu = document.getElementById("menu");
var i = ;
menubar.onclick = function () {
i++;
if (i % == ) {
menu.style.top = + "%";
menu.style.display = "none";
menu.style.top = + "%";
menu.style.transform = "translated(-%,-%,) rotate(deg)";
menu.style.transform = "translated(-%,-%,) rotate(deg)";
}
else {
menu.style.transform = "translated(-%,-%,) rotate(deg)";
menu.style.transform = "translated(-%,-%,) rotate(deg)";
menu.style.top = + "%";
menu.style.top = + "%";
menu.style.display = "block";
}
}
}

以上代碼簡(jiǎn)單實(shí)現(xiàn)了動(dòng)態(tài)按鈕菜單特效，希望對(duì)大家有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript中數(shù)組與對(duì)象的使用方法區(qū)別
數(shù)組（array）是按次序排列的一組值。JS其實(shí)沒(méi)有真正的數(shù)組，只是用對(duì)象模擬數(shù)組。本質(zhì)上，數(shù)組屬于一種特殊的對(duì)象。typeof運(yùn)算符會(huì)返回?cái)?shù)組的類型是object。在javascript中，數(shù)組又可以認(rèn)為是索引數(shù)組，即可以用整數(shù)來(lái)進(jìn)行索引。數(shù)組和對(duì)象在這種情況下非常接近。
2022-12-12
在js中使用"with"語(yǔ)句中跨frame的變量引用問(wèn)題
在js中使用"with"語(yǔ)句中跨frame的變量引用問(wèn)題...
2007-03-03
JS實(shí)現(xiàn)圖片上傳多次上傳同一張不生效的處理方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片上傳多次上傳同一張不生效的處理方法,處理方法也很簡(jiǎn)單，只要在刪除方法里置空input，具體實(shí)例代碼大家參考下本文
2018-08-08
前端圖片壓縮常見的一些解決辦法
這篇文章主要給大家介紹了關(guān)于前端圖片壓縮常見的一些解決辦法,圖片上傳是前端中常見的的業(yè)務(wù)場(chǎng)景,無(wú)論是前臺(tái)還是后臺(tái),適當(dāng)?shù)膶?duì)圖片進(jìn)行壓縮處理,可以顯著的提升用戶體驗(yàn),需要的朋友可以參考下
2023-11-11
js this 綁定機(jī)制深入詳解
這篇文章主要介紹了js this 綁定機(jī)制,結(jié)合實(shí)例形式深入分析了js this 綁定機(jī)制相關(guān)原理、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JS獲取子、父、兄節(jié)點(diǎn)方法小結(jié)
這篇文章主要介紹了JS獲取子、父、兄節(jié)點(diǎn)方法總結(jié)及JS獲取兄弟節(jié)點(diǎn)的兩種方法,需要的朋友可以參考下
2017-08-08
javascript獲取URL參數(shù)與參數(shù)值的示例代碼
本篇文章主要是對(duì)javascript獲取URL參數(shù)與參數(shù)值的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
js的邏輯運(yùn)算符 ||
初次見到這樣語(yǔ)句 a=a || [] 還有些納悶，因?yàn)樵谄渌Z(yǔ)言中沒(méi)見過(guò)有如此用法。
2010-05-05
代碼規(guī)范需要防微杜漸code?review6個(gè)小錯(cuò)誤糾正
這篇文章主要為大家介紹了代碼規(guī)范需要防微杜漸code?review中的6個(gè)小錯(cuò)誤糾正，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
es6學(xué)習(xí)筆記之Async函數(shù)的使用示例
async 函數(shù)，使得異步操作變得更加方便。它是 Generator 函數(shù)的語(yǔ)法糖。下面這篇文章主要給大家介紹了es6學(xué)習(xí)筆記之Async函數(shù)使用的相關(guān)資料，文中給出了詳細(xì)的示例代碼，需要的朋友們下面來(lái)一起看看吧。
2017-05-05