好看漂亮的html5網(wǎng)頁特效學(xué)習(xí)筆記(5)_弧形菜單

Guakin_Huang 發(fā)布于2019-08-30 15:44 / 3721人閱讀

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

效果：

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

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

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

源碼：

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

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

學(xué)習(xí)筆記： text-decoration:

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

隱藏超出邊界的子元素：

該例子中有13個(gè)菜單項(xiàng)，但只顯示出12個(gè)，因?yàn)榈?個(gè)和第13個(gè)超出了父元素的邊界，被隱藏了。

overflow: hidden;

漸入隱藏效果：

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

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

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

.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%);
}

按鈕觸摸漸變：

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

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

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

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

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

?
?

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

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

javascript詳細(xì)解釋： 第一步：

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

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

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

function allocationItems() {
    //首先設(shè)置第7個(gè)元素處于中間最大的位置
    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";

    //計(jì)算其它菜單項(xiàng)的位置
    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了嗎？不過這個(gè)名字隨便取就行了，叫”photo”之類的也可以，只要保證js和html一樣就行

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


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

第二步：

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

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

然后執(zhí)行函數(shù)animate()。不過這個(gè)執(zhí)行函數(shù)把別的函數(shù)當(dāng)成參數(shù)傳進(jìn)去了，注意看。先不管當(dāng)成參數(shù)傳的函數(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);
            // 自啟動(dòng)來（按下按鈕）的時(shí)差
            var timePassed = time - start;
            console.log(time, start)
            // 不能超過最大持續(xù)時(shí)間
            if (timePassed > duration)
                timePassed = duration;
            //重新繪制菜單項(xiàng)的位置
            draw();
            console.log(6);
            if (timePassed < duration) {
                console.log(7);
                requestAnimationFrame(run);
            } else 
            {
                console.log(8);
                callback();
                console.log(9);
            }
        });
    }

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

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

每次執(zhí)行run函數(shù)，都要執(zhí)行一遍draw函數(shù)。draw我多帶帶放了出來，便于理解。仔細(xì)一看，這不就是更新菜單項(xiàng)的位置嗎？菜單項(xiàng)位置并不是一下就從原位置到了指定位置，而是慢慢地移過去的，所以看起來很流暢。注意這兒的$和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)在播放時(shí)間還沒到規(guī)定的時(shí)間的話，再執(zhí)行一遍run函數(shù)。如此反復(fù)下去。如果到了規(guī)定時(shí)間的話，就執(zhí)行callback()。更多Callback函數(shù)的知識(shí)請(qǐng)看https://blog.csdn.net/UnderIc...，我在這兒就不多說了。

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

按向下的按鈕也是一樣。

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

云服務(wù)器 GPU云服務(wù)器 java好看的菜單漂亮的導(dǎo)航菜單js 弧形滑動(dòng)菜單好看的js網(wǎng)頁

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116375.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Guakin_Huang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RangCloud：雙十一促銷，全年最低價(jià)，香港CN2+BGP線路VPS/5折優(yōu)惠，1核/1G套餐月

閱讀 1774·2021-11-02 14:47
好看漂亮的html5網(wǎng)頁特效學(xué)習(xí)筆記(5)_弧形菜單

閱讀 3722·2019-08-30 15:44
如果你在2018面試前端，那這篇文章最好看一看！

閱讀 1407·2019-08-29 16:42
重學(xué)前端學(xué)習(xí)筆記（二十三）--狹義的文檔對(duì)象DOM

閱讀 1801·2019-08-26 13:53
vue實(shí)現(xiàn)自定義dialog組件

閱讀 1003·2019-08-26 10:41
WebGL three.js學(xué)習(xí)筆記使用粒子系統(tǒng)模擬時(shí)空隧道（蟲洞）

閱讀 3566·2019-08-23 17:10
H5拍照、選擇圖片上傳組件核心

閱讀 686·2019-08-23 14:24
微信小程序自定義組件(一)

閱讀 1797·2019-08-23 11:59

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

好看漂亮的html5網(wǎng)頁特效學(xué)習(xí)筆記(5)_弧形菜單

相關(guān)文章

**好看漂亮的*html5**網(wǎng)頁特效學(xué)習(xí)*筆記(4)_canvas實(shí)現(xiàn)火焰跟隨鼠標(biāo)**

**好看漂亮的*html5**網(wǎng)頁特效學(xué)習(xí)*筆記(1)_水墨動(dòng)畫**