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

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

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

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

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

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

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

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

overflow: hidden;

第2，3，11，12個雖然沒有被隱藏，但看起來很朦朧。這樣的效果首先是設置透明度，嗯，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%);
}

下面這行代碼的效果時，當鼠標放上按鈕時，按鈕花3秒從白色漸變成黑色，離開時立馬從黑色變為白色。

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

如果我們想鼠標離開時也是黑色逐漸變為白色怎么辦？同樣加個transition：

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

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

?
?

由于符號本身很小，于是用scale放大，為了防止用戶復制內容時不小心選中它，以及為了防止被用戶看出來是個符號，加上一個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() {
    //首先設置第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設定的屬性值一樣，看到data-img了嗎？不過這個名字隨便取就行了，叫”photo”之類的也可以，只要保證js和html一樣就行

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

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

當按下按鈕時，執行animation()，傳個參數，1為向上，0為向上。現在看看animtaion函數里面有什么。首先是定義一些東西

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

然后執行函數animate()。不過這個執行函數把別的函數當成參數傳進去了，注意看。先不管當成參數傳的函數是什么，暫時用不上。

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()函數的定義：

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)
            // 不能超過最大持續時間
            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執行run函數。至于run函數是什么，已經在requestAnimationFrame函數中定義好了。

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

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

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函數，如果現在播放時間還沒到規定的時間的話，再執行一遍run函數。如此反復下去。如果到了規定時間的話，就執行callback()。更多Callback函數的知識請看https://blog.csdn.net/UnderIc...，我在這兒就不多說了。

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

按向下的按鈕也是一樣。

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();
    }