摘要：定義標(biāo)準(zhǔn)的文本。然后看看函數(shù)的定義自啟動來按下按鈕的時差不能超過最大持續(xù)時間重新繪制菜單項的位置先用確定按下按鈕的時間，儲存在中。如果到了規(guī)定時間的話，就執(zhí)行。然后再把取下的第一個當(dāng)成第十三個接在最后面，又成了新的菜單排列。

弧形菜單，文字按規(guī)則變形以及變換透明度

簡單的javascript，上手難度：簡單

歡迎來我的博客看此文章： https://clatterrr.com/archive...

演示地址：https://clatterrr.github.io/m...

源碼：https://github.com/clatterrr/...

最主要的功能就是給文字加上附著在文字底部，上方，或者中間的線（刪除線)。參考：https://www.w3school.com.cn/c...
none
默認(rèn)。定義標(biāo)準(zhǔn)的文本。
underline
定義文本下的一條線。
overline
定義文本上的一條線。
line-through
定義穿過文本下的一條線。
inherit
規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值。

該例子中有13個菜單項，但只顯示出12個，因為第1個和第13個超出了父元素的邊界，被隱藏了。

overflow: hidden;

第2，3，11，12個雖然沒有被隱藏，但看起來很朦朧。這樣的效果首先是設(shè)置透明度，嗯，nth-child的用法

.item:nth-child(2), .item:nth-child(3), .item:nth-child(11), .item:nth-child(12) {
  opacity: 0.2;
}

然后是鄰近頂部和底部的線性漸變，這樣看來菜單項似乎和背景融為一體了

.top {
  top: 0;
  background: linear-gradient(to bottom, steelblue 0%, rgba(70, 130, 180, 0) 100%);
}

.bottom {
  bottom: 0;
  background: linear-gradient(to bottom, rgba(70, 130, 180, 0) 0%, steelblue 100%);
}

下面這行代碼的效果時，當(dāng)鼠標(biāo)放上按鈕時，按鈕花3秒從白色漸變成黑色，離開時立馬從黑色變?yōu)榘咨?/p>

.btn {
  color: white;
}
.btn:hover {
  color: black;
  transition: color 3s;
}

如果我們想鼠標(biāo)離開時也是黑色逐漸變?yōu)榘咨趺崔k？同樣加個transition：

.btn {
  color: white;
 transition: color 3s;
}
.btn:hover {
  color: black;
  transition: color 3s;
}

吐槽一下，這兒的上下按鈕是兩個特殊符號，見html。win10輸入法自帶許多特殊符號，夠弄出很多好玩的東西了

?
?

由于符號本身很小，于是用scale放大，為了防止用戶復(fù)制內(nèi)容時不小心選中它，以及為了防止被用戶看出來是個符號，加上一個user-select：none，這樣用戶就選不中了。

.btn {
      transform: scale(3, 1);
      user-select: none;
}

初始話一波，把除按鈕之外的東西都定義好，就形成了一開始看到的界面

    const srart_pos = 90.75;
const item_count = 13;
const s = 0.52 * Math.PI / 180; //計算位移角度

var pos = [];
var elem = document.getElementsByClassName("item");

function allocationItems() {
    //首先設(shè)置第7個元素處于中間最大的位置
    var i;
    var pp = elem[6].getElementsByTagName("a")[0].getAttribute("data-img");
    document.getElementById("pic").style.backgroundImage = "url("" + pp + "")";
    document.getElementById("pic").className = "img-box";

    //計算其它菜單項的位置
    pos[0] = srart_pos;
    for (i = 1; i < item_count; i++) {
        pos[i] = pos[i - 1] - 0.2;
        last_pos = pos[i];
    }
    for (i = 0; i < item_count + 1; i++) {
        elem[i].style.left = 240 + 250 * Math.sin(pos[i]) + "px";
        elem[i].style.top = 240 + 250 * Math.cos(pos[i]) + "px";
    }
}
allocationItems();

注意下面這句,getAtrribute的名字要和html設(shè)定的屬性值一樣，看到data-img了嗎？不過這個名字隨便取就行了，叫”photo”之類的也可以，只要保證js和html一樣就行

var pp = elem[6].getElementsByTagName("a")[0].getAttribute("data-img");

            Can I use... Support tables for HTML5, CSS3, etc

當(dāng)按下按鈕時，執(zhí)行animation()，傳個參數(shù)，1為向上，0為向上?，F(xiàn)在看看animtaion函數(shù)里面有什么。首先是定義一些東西

var $ = {
        radius: 250, //圓周半徑
        speed: 10 // 速度單位
 }
 var e = elem;
document.getElementById("pic").className = "hide";
console.log(3);

然后執(zhí)行函數(shù)animate()。不過這個執(zhí)行函數(shù)把別的函數(shù)當(dāng)成參數(shù)傳進(jìn)去了，注意看。先不管當(dāng)成參數(shù)傳的函數(shù)是什么，暫時用不上。

animate(function () {
        console.log(1);
        var i;
        for (i = 0; i < item_count; i++) {
            
           
            e[i].style.left = 240 + $.radius * Math.sin(pos[i]) + "px";
            e[i].style.top = 240 + $.radius * Math.cos(pos[i]) + "px";
            if (flag) {
                pos[i] += s;
            } else {
                pos[i] -= s;
            }
        }   /* callback function */
    }, 400, function changeItems() {
        console.log(2);
        var list = document.getElementById("list");
        var ch = flag ? list.firstElementChild : list.lastElementChild
        ch.remove();
        if (flag) {
            list.appendChild(ch);
        } else {
            list.insertBefore(ch, list.firstChild);
        }
        allocationItems();
    });

然后看看animate()函數(shù)的定義：

function animate(draw, duration, callback) {
        console.log(4);
        var start = performance.now();

         requestAnimationFrame(function run(time) {
            console.log(5);
            // 自啟動來（按下按鈕）的時差
            var timePassed = time - start;
            console.log(time, start)
            // 不能超過最大持續(xù)時間
            if (timePassed > duration)
                timePassed = duration;
            //重新繪制菜單項的位置
            draw();
            console.log(6);
            if (timePassed < duration) {
                console.log(7);
                requestAnimationFrame(run);
            } else 
            {
                console.log(8);
                callback();
                console.log(9);
            }
        });
    }

先用performance.now()確定按下按鈕的時間，儲存在start中。然后用requestAnimationFrame執(zhí)行run函數(shù)。至于run函數(shù)是什么，已經(jīng)在requestAnimationFrame函數(shù)中定義好了。

注意requestAnimationFrame調(diào)用時會給其中的函數(shù)傳入DOMHighResTimeStamp參數(shù)，該參數(shù)與performance.now()的返回值相同，它表示requestAnimationFrame() 開始去執(zhí)行其中函數(shù)的時刻。這就是為什么run函數(shù)的定義中會有個time參數(shù)了，其實就是目前的時刻。

每次執(zhí)行run函數(shù)，都要執(zhí)行一遍draw函數(shù)。draw我多帶帶放了出來，便于理解。仔細(xì)一看，這不就是更新菜單項的位置嗎？菜單項位置并不是一下就從原位置到了指定位置，而是慢慢地移過去的，所以看起來很流暢。注意這兒的$和jquery沒有關(guān)系，看看前面的定義即可。

function draw() {
        console.log(1);
        var i;
        for (i = 0; i < item_count; i++) {
             e[i].style.left = 240 + $.radius * Math.sin(pos[i]) + "px";
            e[i].style.top = 240 + $.radius * Math.cos(pos[i]) + "px";
            if (flag) {
                pos[i] += s;
            } else {
                pos[i] -= s;
            }
    }
}

返回run函數(shù)，如果現(xiàn)在播放時間還沒到規(guī)定的時間的話，再執(zhí)行一遍run函數(shù)。如此反復(fù)下去。如果到了規(guī)定時間的話，就執(zhí)行callback()。更多Callback函數(shù)的知識請看https://blog.csdn.net/UnderIc...，我在這兒就不多說了。

但到底執(zhí)行的函數(shù)是什么樣子？多帶帶放出來一看，注意按向上的按鈕時，flag = 1，否則flag = 0。假如按了向上的按鈕，所有菜單項逆時針向上轉(zhuǎn)，這時第一個菜單項需要接著第十三個菜單項后面，否則后面就空了。于是就把第一個菜單項取下來remove()，掉，于是原來的第二到第十三菜單項序號都變小一個，第八個變成了第七個，變成了最大的那個。然后再把取下的第一個當(dāng)成第十三個接在最后面，又成了新的菜單排列。

按向下的按鈕也是一樣。

function changeItems() {
        console.log(2);
        var list = document.getElementById("list");
        var ch = flag ? list.firstElementChild : list.lastElementChild
        ch.remove();
        if (flag) {
            list.appendChild(ch);
        } else {
            list.insertBefore(ch, list.firstChild);
        }
        allocationItems();
    }