如何用js寫乙個有滑動動畫的切換table

在不久前有個h5專案上遇見乙個需求需要寫乙個tab底部條下劃線滑動效果的功能，特在此記錄一下。

其實原理非常簡單，底部紅線和父級相對定位，改變紅線的left值就能做到了。要動畫效果的話底部紅線的css樣式加上transition動畫就可以了。下面我們上**。

css部分

body,html

.tab
.tab_top
.tab_top .item
.tab_bot
.tab_bot .change_line
.content1
.content2
.content3
.changecontent
.content .none

="content"

>
="tab"
>
="tab_top"
>
="item"
>頁面一<
/div>
="item"
>頁面二<
/div>
="item"
>頁面三<
/div>
<
/div>
="tab_bot"
>
="change_line"
>
<
/div>
<
/div>
<
/div>
="changecontent content1"
>
這是頁面一的內容
<
/div>
="changecontent content2 none"
>
這是頁面二的內容
<
/div>
="changecontent content3 none"
>
這是頁面三的內容
<
/div>
<
/div>主要的就是下面的js部分，通過offsetwidth
和offsetwidth獲取每個選項框距父級元素左邊的位置和本身的寬度，然後與紅線寬度相減最後計算得到合適的left值
var tab_top=document.
getelementsbyclassname
("tab_top")[
0]var change_line=document.
getelementsbyclassname
("change_line")[
0]var item1=document.
getelementsbyclassname
("item")[
0]var item2=document.
getelementsbyclassname
("item")[
1]var item3=document.
getelementsbyclassname
("item")[
2]var content1=document.
getelementsbyclassname
("content1")[
0]var content2=document.
getelementsbyclassname
("content2")[
0]var content3=document.
getelementsbyclassname
("content3")[
0]let item1left=item1.offsetleft //分別獲取各個選項距父級左邊的距離
let item2left=item2.offsetleft
let item3left=item3.offsetleft
let item1width=item1.offsetwidth //分別獲取各個選項寬度
let item2width=item2.offsetwidth
let item3width=item3.offsetwidth
let change_linewidth=change_line.offsetwidth //獲取底部紅線寬度
let item1disparity=item1width-change_linewidth //分別獲取各個選項寬度和底部紅線寬度差距(所以紅線最好小於標題寬度否則需要分別處理)
let item2disparity=item2.offsetwidth-change_linewidth
let item3disparity=item3.offsetwidth-change_linewidth
change_line.style.left=
(item1left+
(item1disparity/2)
)+'px'
//初始時第乙個被選中
item1.
onclick
=function()
item2.
onclick
=function()
item3.
onclick
=function()

這裡有可能寫得有點複雜了，如果有更好的優化方法，希望能夠得到你們的指正，不積跬步，無以至千里；不善小事，何以成大器。

如何用C 寫乙個類

其實寫乙個類很簡單，但是要寫乙個符合各方面要求的類，卻不是一件容易的事情。下面總結一下需要考慮的一些問題，先把暫時想到的方面記下來，以後想到新的在增加吧。類的生死和初始化 1.copy ctor和copy assignment是不是需要private 單例常用 或者是不是要用private繼承來阻止...

如何用Javascript寫乙個Class？

記得前面某次面試被問到此問題，一直以來因為對js的不重視 一知半解，所以當時就懵了 最近google了下，找到以下幾種寫class的方式 1 js因為不是oo語言，所以沒有class的概念，都是通過prototype的方式實現的。var namedclass class.create getname...

如何用vue製作乙個探探滑動元件

嗨，說起探探想必各位程式汪都不陌生 畢竟妹子很多 能在上面絲滑的翻牌子，探探的的堆疊滑動元件起到了關鍵的作用，下面就來看看如何用vue寫乙個探探的堆疊元件 簡單使用下探探會發現，堆疊滑動的功能很簡單，用一張圖概括就是 簡單歸納下裡面包含的基本功能點 體驗優化 有了歸納好的功能點，我們實現元件的思路會...