好看漂亮的html5網頁特效學習筆記(5)_弧形菜單

效果：

• 弧形菜單，文字按規則變形以及變換透明度
• 簡單的javascript，上手難度：簡單
• 歡迎來個人博客看此文章： https://clatterrr.com/archive...

源碼：

• 演示地址：https://clatterrr.github.io/m...
• 源碼：https://github.com/clatterrr/...

學習筆記：

text-decoration:

最主要的功能就是給文字加上附着在文字底部，上方，或者中間的線（刪除線)。參考：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輸入法自帶許多特殊符號，夠弄出不少好玩的東西了

<div class="btn prev" onClick="animation({}, 1);">˄</div>
<div class="btn next" onClick="animation({}, 0);">˅</div>

因爲符號自己很小，因而用scale放大，爲了防止用戶複製內容時不當心選中它，以及爲了防止被用戶看出來是個符號，加上一個user-select：none，這樣用戶就選不中了。

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

javascript詳細解釋：

第一步：

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

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');

<a href="" data-img="img/6.jpg" target="_blank" rel="noopener">
            Can I use... Support tables for HTML5, CSS3, etc
</a>

第二步：

當按下按鈕時，執行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();
    }