日P视频免费,97超碰资源,日韩欧美mv国产,六月婷婷AV,国产精品久久综合,在线观看亚洲视频网站,熟操综合,亚洲日韩欧美国产

要實現(xiàn)的效果是當(dāng)點擊某一個菜單的時候，菜單的底部有一個線條高亮，從上一次的位置切換到點擊的位置，而且需要添加動畫效果。

null

首先我們的DOM結(jié)構(gòu)是這樣的，li 是顯示每一個菜單的內(nèi)容，我們添加了自定義的屬性，用來區(qū)分在點擊的時候具體是點擊第幾個的位置。線條是通過定位在最底下的。

class="wrapper">  class="list" id="list">    class="item" data-index="0">首頁    class="item" data-index="1">詳情    class="item" data-index="2">評價  
  class="line" id="line">    class="inner">

在css上面，線條通過兩個 div 控制，外層的寬度要和菜單的寬度保持一致，里面的寬度是具體線條顯示的寬度。這樣就能居中顯示。

.wrapper {  position: relative;}.list {  display: flex;}.item {  flex: 1;  text-align: center;  line-height: 36px;}.line {  position: absolute;  text-align: center;  left: 0;  bottom: 0;  width: 0;  transform: translate3d(0, 0, 0);  transition: transform 0.3s ease-out;  display: none;}.inner {  width: 20px;  height: 2px;  background: red;  display: inline-block;  vertical-align: bottom;}

在JS里面，我們先需要獲取每個菜單的寬度和距離頁面左邊的距離，然后綁定點擊事件，根據(jù)自定義屬性我們知道點擊的位置，然后重新設(shè)置線條的偏移位置。

const list = document.getElementsByClassName('item')const line = document.getElementById('line')const listWrapper = document.getElementById('list')const resut = []for (let i = 0; i < list.length; i++) {  const element = list[i]  resut.push({    width: element.offsetWidth,    left: element.offsetLeft  })}line.style.width = `${resut[0].width}px`line.style.display = 'block'listWrapper.onclick = function (e) {  const index = e.target.dataset.index  const width = resut[index].width  line.style.width = `${width}px`  const left = resut[index].left  line.style.transform = `translate3d(${left}px, 0, 0)`}

設(shè)置了寬度是為了防止有些菜單寬度不一樣，所以為了能居中，我們就需要點擊的時候去重新設(shè)置一下。還有就是盡量使用 transform 屬性而不是 left 設(shè)置偏移，動畫性能效果更好。

菜單欄底部線條切換效果