html弧形列表效果,web前端入门到实战：html5网页特效-弧形菜单
效果：
弧形菜單，文字按規則變形以及變換透明度
簡單的javascript，上手難度：簡單
學習筆記：
text-decoration:
最主要的功能就是給文字加上附著在文字底部，上方，或者中間的線(刪除線)。
默認。定義標準的文本。
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;
}
然后是鄰近頂部和底部的線性漸變，這樣看來菜單項似乎和背景融為一體了
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻，PDF)
.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;
}
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');
Can I use... Support tables for HTML5, CSS3, etc
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻，PDF)
第二步：
當按下按鈕時，執行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沒有關系，看看前面的定義即可。
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻，PDF)
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()。
但到底執行的函數是什么樣子？單獨放出來一看，注意按向上的按鈕時，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();
}
總結
以上是生活随笔為你收集整理的html弧形列表效果,web前端入门到实战：html5网页特效-弧形菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 绘图 双缓存,Andro
- 下一篇： 云南大学计算机科学技术是哪个院的,云南大