Vue弧形輪播選單導航欄

阿新 • • 發佈：2021-01-11

技術標籤：vue.js jquery javascript html5 css3

搞了個弧形輪播導航欄，輪播有動畫過渡，可設定自動輪播，以及手動左右切換，只提供我的實現方法，沒有整合為元件，大家可做參考根據自己的需求進行修改，優化封裝成元件使用。
視訊演示，有點模糊，手機拍的。
在這裡插入圖片描述

有什麼問題評論見

<template>
  <div class="user_callback">
    <div class="user_pic"
         id="user_pic">
      < 
span class="prev"></span> <span class="next"></span>
      <ul id="user_call">
        <li v-for="v in backimage"
            :key="v.id"
            @click="routerChoose(v.id)"
            :class="'user_pic'+v.id" 
>
          <img :src="v.img"
               alt="1" />
          <div :class="current===v.id?'info_y':'info'">{{v.title}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export 
 default {
  data () {
    return {
      current: 1,
      backimage: [
        {
          id: 1,
          title: '首頁',
          img: require("../assets/img/items/icon_home_selected.png")
        },
        {
          id: 2,
          title: '科技專題',
          img: require("../assets/img/items/icon_home_normal.png")
        },
        {
          id: 3,
          title: '能耗專題',
          img: require("../assets/img/items/icon_energy_normal.png")
        },
        {
          id: 4,
          title: '企業專題',
          img: require("../assets/img/items/icon_business_normal.png")
        },
        {
          id: 5,
          title: '經濟專題',
          img: require("../assets/img/items/icon_economy_normal.png")
        },
        {
          id: 6,
          title: '停車專題',
          img: require("../assets/img/items/icon_home_normal.png")
        },
        {
          id: 7,
          title: '管網專題',
          img: require("../assets/img/items/icon_pipe_normal.png")
        },
        {
          id: 8,
          title: 'OA專題',
          img: require("../assets/img/items/icon_oa_normal.png")
        }
      ],
    }
  },
  mounted () {
    this.arcSlip()
  },
  methods: {
    routerChoose (id) {
      let backimage = [
        {
          id: 1,
          title: '首頁',
          img: require("../assets/img/items/icon_home_normal.png")
        },
        {
          id: 2,
          title: '科技專題',
          img: require("../assets/img/items/icon_home_normal.png")
        },
        {
          id: 3,
          title: '能耗專題',
          img: require("../assets/img/items/icon_energy_normal.png")
        },
        {
          id: 4,
          title: '企業專題',
          img: require("../assets/img/items/icon_business_normal.png")
        },
        {
          id: 5,
          title: '經濟專題',
          img: require("../assets/img/items/icon_economy_normal.png")
        },
        {
          id: 6,
          title: '停車專題',
          img: require("../assets/img/items/icon_home_normal.png")
        },
        {
          id: 7,
          title: '管網專題',
          img: require("../assets/img/items/icon_pipe_normal.png")
        },
        {
          id: 8,
          title: 'OA專題',
          img: require("../assets/img/items/icon_oa_normal.png")
        }
      ]
      this.current = id
      if (id === 1) {
        backimage[id - 1].img = require("../assets/img/items/icon_home_selected.png");
      } else if (id === 2) {
        backimage[id - 1].img = require("../assets/img/items/icon_home_selected.png");
      } else if (id === 3) {
        backimage[id - 1].img = require("../assets/img/items/icon_energy_selected.png");
      } else if (id === 4) {
        backimage[id - 1].img = require("../assets/img/items/icon_business_selected.png");
      } else if (id === 5) {
        backimage[id - 1].img = require("../assets/img/items/icon_economy_selected.png");
      } else if (id === 6) {
        backimage[id - 1].img = require("../assets/img/items/icon_home_selected.png");
      } else if (id === 7) {
        backimage[id - 1].img = require("../assets/img/items/icon_pipe_selected.png");
      } else if (id === 8) {
        backimage[id - 1].img = require("../assets/img/items/icon_oa_selected.png");
      }

      this.backimage = backimage
    },
    arcSlip () {
      var that = this
      var oPic = document.getElementById('user_pic');
      var oPrev = that.getByClass(oPic, 'prev')[0];
      var oNext = that.getByClass(oPic, 'next')[0];

      var aLi = oPic.getElementsByTagName('li');

      var arr = [];

      for (var i = 0; i < aLi.length; i++) {
        var oImg = aLi[i].getElementsByTagName('img')[0];

        arr.push([parseInt(getStyle(aLi[i], 'left')), parseInt(getStyle(aLi[i], 'top')),
        getStyle(aLi[i], 'zIndex'), oImg.width, parseFloat(getStyle(aLi[i], 'opacity') * 100)
        ]);
      }


      oPrev.onclick = function moveTP () {

        arr.push(arr[0]);
        arr.shift();
        for (var i = 0; i < aLi.length; i++) {
          var oImg = aLi[i].getElementsByTagName('img')[0];

          aLi[i].style.zIndex = arr[i][2];
          that.startMove(aLi[i], {
            left: arr[i][0],
            top: arr[i][1],
            opacity: arr[i][4]
          });
          that.startMove(oImg, {
            width: arr[i][3]
          });
        }

      }

      oNext.onclick = function moveTN () {
        arr.unshift(arr[arr.length - 1]);
        arr.pop();
        for (var i = 0; i < aLi.length; i++) {
          var oImg = aLi[i].getElementsByTagName('img')[0];

          aLi[i].style.zIndex = arr[i][2];
          that.startMove(aLi[i], {
            left: arr[i][0],
            top: arr[i][1],
            opacity: arr[i][4]
          });
          that.startMove(oImg, {
            width: arr[i][3]
          });
        }
      }
      var moveTime = setInterval(function () {

        oNext.click();

      }, 2000);
      $('#user_pic').hover(function () {

        clearInterval(moveTime);
      }, function () {
        moveTime = setInterval(function () {
          oNext.click();
        }, 2000);
      });

      function getStyle (obj, name) {
        if (obj.currentStyle) {
          return obj.currentStyle[name];
        } else {
          return getComputedStyle(obj, false)[name];
        }
      }
    },
    getByClass (oParent, sClass) {
      var aResult = [];
      var aEle = oParent.getElementsByTagName('*');

      for (var i = 0; i < aEle.length; i++) {
        if (aEle[i].className == sClass) {
          aResult.push(aEle[i]);
        }
      }
      return aResult;
    },
    getStyle (obj, name) {
      if (obj.currentStyle) {
        return obj.currentStyle[name];
      } else {
        return getComputedStyle(obj, false)[name];
      }
    },
    startMove (obj, json, fnEnd) {
      let that = this
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var bStop = true;
        for (var attr in json) {
          var cur = 0;

          if (attr == 'opacity') {
            cur = Math.round(parseFloat(that.getStyle(obj, attr)) * 100);
          } else {
            cur = parseInt(that.getStyle(obj, attr));
          }

          var speed = (json[attr] - cur) / 6;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

          if (cur != json[attr]) bStop = false;

          if (attr == 'opacity') {
            obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
            obj.style.opacity = (cur + speed) / 100;
          } else {
            obj.style[attr] = cur + speed + 'px';
          }
        }

        if (bStop) {
          clearInterval(obj.timer);
          if (fnEnd) fnEnd();
        }

      }, 30)


    }
  }
}
</script>

<style lang="less" scoped>
img {
  border: 0;
}

li {
  list-style: none;
}

.user_callback #user_pic {
  position: relative;
  overflow: hidden;
  background-image: url(../assets/img/router.png);
  background-size: 100% 100%;
  background-position: center center;
  height: 2.3rem;
  // height: 5rem;
  width: 9rem;
  z-index: 2;
  // background: pink;
  margin: 0 auto;
  .info {
    color: #ffffff;
    font-size: 0.2rem;
    margin-top: 0.05rem;
    text-align: center;
    white-space: nowrap;
    background: rgba(13, 38, 141, 0.82);
    padding: 0.1rem;
  }
  .info_y {
    color: #ffffff;
    font-size: 0.2rem;
    margin-top: 0.05rem;
    text-align: center;
    white-space: nowrap;
    background: rgba(244, 197, 72, 0.82);
    padding: 0.1rem;
  }
}

.user_callback #user_pic ul {
  width: 990px;
  height: 285px;
  position: relative;
  top: 20px;
  left: 105px;
}

.user_callback #user_pic ul li {
  position: absolute;
}

.user_callback #user_pic ul img {
  position: relative;
  top: 0;
  left: 0;
}

.user_callback #user_pic ul .user_pic1 {
  left: -75px;
  top: -10px;
  z-index: 0;
}

.user_callback #user_pic ul .user_pic2 {
  left: 3px;
  top: 16px;

  z-index: 2;
}

.user_callback #user_pic ul .user_pic3 {
  left: 85px;
  top: 42px;

  z-index: 3;
}

.user_callback #user_pic ul .user_pic4 {
  left: 167px;
  top: 41px;

  z-index: 4;
}

.user_callback #user_pic ul .user_pic5 {
  left: 243px;
  top: 17px;

  z-index: 3;
}

.user_callback #user_pic ul .user_pic6 {
  left: 316px;
  top: -13px;
  // top: -21px;
  // left: 345px;
  z-index: 2;
}

.user_callback #user_pic ul .user_pic7 {
  left: 345px;
  top: -50px;
  z-index: 1;
}

.user_callback #user_pic ul .user_pic8 {
  left: -99px;
  top: -49px;
  z-index: 0;
}
.user_callback #user_pic ul li.user_pic1 {
  opacity: 0.6;
}

.user_callback #user_pic ul li.user_pic2 {
  opacity: 0.8;
}

.user_callback #user_pic ul li.user_pic3 {
  opacity: 1;
}

.user_callback #user_pic ul li.user_pic4 {
  opacity: 1;
}

.user_callback #user_pic ul li.user_pic5 {
  opacity: 0.8;
}

.user_callback #user_pic ul li.user_pic6 {
  opacity: 0.6;
}

.user_callback #user_pic ul li.user_pic7 {
  opacity: 0.2;
}

.user_callback #user_pic ul li.user_pic8 {
  opacity: 0.2;
}

.user_callback #user_pic ul li.user_pic1 img {
  width: 1rem;
  height: 1rem;
}

.user_callback #user_pic ul li.user_pic2 img {
  width: 1rem;
  height: 1rem;
}
.user_callback #user_pic ul li.user_pic3 img {
  width: 1rem;
  height: 1rem;
}

.user_callback #user_pic ul li.user_pic4 img {
  width: 1rem;
  height: 1rem;
}

.user_callback #user_pic ul li.user_pic5 img {
  width: 1rem;
  height: 1rem;
}

.user_callback #user_pic ul li.user_pic6 img {
  width: 1rem;
  height: 1rem;
}

.user_callback #user_pic ul li.user_pic7 img {
  width: 1rem;
  height: 1rem;
}

.user_callback #user_pic ul li.user_pic8 img {
  width: 1rem;
  height: 1rem;
}

.user_callback #user_pic span {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 160px;
  z-index: 30;
  cursor: pointer;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.user_callback #user_pic:hover span {
  opacity: 1;
  filter: alpha(opacity=100);
}

.user_callback #user_pic span img {
  width: 80px;
  height: 80px;
  display: block;
}

.user_callback #user_pic span.prev {
  background: url(../assets/img/newIndex/left.png) no-repeat;
  position: absolute;
  top: 100px;
  left: 5px;
  display: inline-block;
  width: 60px;
  height: 60px;
}

.user_callback #user_pic span.next {
  background: url(../assets/img/newIndex/right.png) no-repeat;
  position: absolute;
  top: 100px;
  right: 5px;
  display: inline-block;
  width: 60px;
  height: 60px;
}

.user_callback #user_pic span.prev:hover {
  // background: url(../assets/img/items/icon_business_normal.png) no-repeat;
}

.user_callback #user_pic span.next:hover {
  // background: url(../assets/img/items/icon_business_normal.png) no-repeat;
}

.user_callback {
  overflow: hidden;
}
</style>

Vue弧形輪播選單導航欄

技術標籤：vue.jsjqueryjavascripthtml5css3 搞了個弧形輪播導航欄，輪播有動畫過渡，可設定自動輪播，以及手動左右切換，只提供我的實現方法，沒有整合為元件，大家可做參考根據自己的需求進行修改，優化封裝成

Vue頁面手動重新整理,實現導航欄啟用項還原到初始狀態

場景描述：在頁面中存在頂部導航和左側導航，左側導航和右側內容區使用了命名檢視實現，點選左側導航的連結時，右側內容區相應顯示不同元件內容。問題：在當前連結手動重新整理瀏覽器（例如：瀏覽器地址為/enterpris

嵌入式開發之web---js簡單左側選單導航欄goahead

1.給div設定定位。　　複習一下—— 　　css中position有五種屬性：　　　　static:預設值，沒有定位

Vue如何通過opacity控制導航欄的動態顯隱或其他樣式的動畫顯隱效果

技術標籤：vuejavascriptjscss 如何通過opacity控制導航欄的動態顯隱或其他樣式的動畫顯隱效果

vue 上下輪播封裝

vue vant解決瀏覽器重新整理導航欄跳轉至首頁的兩個方法

<template><div id=\"gkbottomBarVTwo\"><router-view /><div class=\"denglu\">&