在不久前有個h5專案上遇見乙個需求需要寫乙個tab底部條下劃線滑動效果的功能,特在此記錄一下。
其實原理非常簡單,底部紅線和父級相對定位,改變紅線的left值就能做到了。要動畫效果的話底部紅線的css樣式加上transition
動畫就可以了。下面我們上**。
css部分
html部分body,html
.tab
.tab_top
.tab_top .item
.tab_bot
.tab_bot .change_line
.content1
.content2
.content3
.changecontent
.content .none
這樣我們就實現tabel底部線滑動的效果了="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寫乙個探探的堆疊元件 簡單使用下探探會發現,堆疊滑動的功能很簡單,用一張圖概括就是 簡單歸納下裡面包含的基本功能點 體驗優化 有了歸納好的功能點,我們實現元件的思路會...