vue實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播

高璐發(fā)布于2019-08-21 15:32 / 1000人閱讀

摘要：關(guān)于旋轉(zhuǎn)木馬效果實(shí)用例子一個(gè)實(shí)際應(yīng)用在優(yōu)酷的頻道頁(yè)。將對(duì)的數(shù)據(jù)操作轉(zhuǎn)化為數(shù)組，數(shù)組元素存儲(chǔ)各項(xiàng)的數(shù)據(jù)寬高絕對(duì)定位偏移值透明度以及層疊參數(shù)，在模板處遍歷實(shí)際項(xiàng)目的數(shù)組，其樣式則通過(guò)索引獲取對(duì)數(shù)組的元素?cái)?shù)據(jù)。

同事拿到個(gè)設(shè)計(jì)稿,是旋轉(zhuǎn)木馬的輪播效果,于是網(wǎng)上找了一下,發(fā)現(xiàn)了jquery實(shí)現(xiàn)的效果,一有空就看看源碼，研究其實(shí)現(xiàn)原理，想著用vue的數(shù)據(jù)驅(qū)動(dòng)方式來(lái)實(shí)現(xiàn)一個(gè)，但這個(gè)效果跟以往做的demo效果不同，每次思考實(shí)現(xiàn)都被卡住了。拖延了好些日子，后來(lái)腦子一轉(zhuǎn)，居然想到方案了，于是動(dòng)手實(shí)現(xiàn)了下。

關(guān)于旋轉(zhuǎn)木馬效果實(shí)用例子：一個(gè)實(shí)際應(yīng)用在優(yōu)酷的頻道頁(yè)。

首先分析一下jquery的實(shí)現(xiàn)效果，其實(shí)是將輪播項(xiàng)的dom進(jìn)行左右分組，并設(shè)定好每個(gè)dom的寬高、層疊參數(shù)、透明度以及位置偏移，然后通過(guò)jquery的動(dòng)畫(huà)api，對(duì)dom組進(jìn)行一個(gè)數(shù)據(jù)切換（復(fù)制下一個(gè)dom的數(shù)據(jù)）。比如現(xiàn)在有ABC三個(gè)，B在中間，當(dāng)右往左切換時(shí)，B獲取C的數(shù)據(jù)，而C拿A的數(shù)據(jù)，而A替換B的數(shù)據(jù)，變成BCA.

關(guān)于計(jì)算

插件接受指定的幾個(gè)數(shù)據(jù)：整體寬高，主項(xiàng)寬高（中間最大），其他項(xiàng)依次縮小的比例。

關(guān)于位置，如圖：

主項(xiàng)應(yīng)該是居中的，所以其位置偏移（絕對(duì)定位）左邊相對(duì)于父元素來(lái)說(shuō)，應(yīng)該是整體寬度和自身寬度之差的一半。而兩邊的其他項(xiàng)，直接相隔則按數(shù)目等分剩余空間。比如假設(shè)父元素寬度800px，主項(xiàng)寬度400px，左邊剩余空間應(yīng)該寬為(800-400)/2=200px,而假設(shè)左邊有兩項(xiàng)，則二者直接等分展示自身部分為200/2=100px;這個(gè)數(shù)值就是我們要考慮的絕對(duì)定位left值，同理可得右邊部分的left值，至于項(xiàng)目的居中絕對(duì)定位，也是類似的道理，更加簡(jiǎn)單。

其次，考慮的是以中間為主項(xiàng)，往兩邊的項(xiàng)應(yīng)該層疊參數(shù)(z-index)越靠中間，值越大，透明度越往兩邊值越小。具體代碼邏輯可從這里找到。

vue實(shí)現(xiàn)

vue的理念是數(shù)據(jù)驅(qū)動(dòng)，所以要把jquery插件那套實(shí)現(xiàn)做一下轉(zhuǎn)化。同樣，也是接受幾個(gè)靜態(tài)數(shù)據(jù)：整體寬高、中間項(xiàng)寬高、縮小比例。

將jquery對(duì)dom的數(shù)據(jù)操作轉(zhuǎn)化為數(shù)組store，數(shù)組元素存儲(chǔ)各項(xiàng)dom的數(shù)據(jù)（寬高、絕對(duì)定位偏移值、透明度以及層疊參數(shù)），在模板處遍歷實(shí)際項(xiàng)目的數(shù)組，其樣式則通過(guò)索引獲取對(duì)store數(shù)組的元素?cái)?shù)據(jù)。

切換數(shù)據(jù)通過(guò)對(duì)store進(jìn)行出隊(duì)、入隊(duì)或反向出隊(duì)和入隊(duì)操作以達(dá)到切換邏輯；再通過(guò)樣式設(shè)定transition來(lái)設(shè)置動(dòng)畫(huà)效果即可。

.item{
  transition: all .8s ease;
}

對(duì)于數(shù)據(jù)的初始化，代碼如下：

 //store數(shù)組
 var items = [];

 //拷貝物理數(shù)據(jù)
 var rlist = copyArr(this.list);

 //獲取中間數(shù)組元素索引
 var level = Math.floor(this.list.length/2);

 //如果數(shù)據(jù)是偶數(shù)則拷貝多一個(gè)數(shù)據(jù).
 if(this.list.length%2==0){
    var center = this.list[0];
    rlist.push(Object.assign({},center));
 }
 
  //左邊部分
  var lefts = rlist.slice(0,level);
  //右邊部分
  var rights = rlist.slice(level);
  var that = this;
  //兩邊剩余空間（單邊）
  var leftGap = (this.allWidth - this.curWidth)/2;
  //等分剩余空間，即間隙
  var gap = leftGap/level;
  lefts.forEach(function(e,i){
    //遍歷左邊部分
    var obj = {};
    //從左往右，其left值是gap倍數(shù)增長(zhǎng)
    obj.left = i*gap;
    //層疊參數(shù)逐級(jí)增1
    obj.zIndex = i+1;
    //透明度則簡(jiǎn)單做逐級(jí)增大
    obj.opacity = 1/(level+1-i);
    //寬高則按距離中間項(xiàng)的個(gè)數(shù)來(lái)選擇縮放
    obj.width = that.curWidth*Math.pow(that.scale,level-i);
    obj.height = that.curHeight*Math.pow(that.scale,level-i);
    //底部距離取最大高與當(dāng)前項(xiàng)高差的一半
    obj.bottom = (that.allHeight-obj.height)/2;
    items.push(obj);
  });
  //遍歷右邊部分，包含中間項(xiàng)
  rights.forEach(function(e,i){
    var obj = {};
    obj.width = that.curWidth*Math.pow(that.scale,i);
    obj.height = that.curHeight*Math.pow(that.scale,i);
    //偏移值可以反向思考，通過(guò)全寬減去距離右邊偏移以及自身寬度
    obj.left = that.allWidth - (level-i)*gap - obj.width;
    obj.zIndex = level-i+1;
    obj.opacity = 1/(i+1);
    obj.bottom = (that.allHeight-obj.height)/2;
    items.push(obj); 
  });

  return {
    items:items,
    rlist:rlist,
    timer:null,
    dir:"right"
  }

加上定時(shí)器和方向選擇，效果就出來(lái)了，如下：

https://jsfiddle.net/dont27/L...

訪問(wèn)不了可以看runjs.

剛開(kāi)始一直思維繞不過(guò)去，一直無(wú)從下手，然而當(dāng)抓到突破點(diǎn)的時(shí)候，其實(shí)寫(xiě)出來(lái)，發(fā)現(xiàn)挺簡(jiǎn)單的！

不過(guò)在偶數(shù)項(xiàng)處理方面，我只是簡(jiǎn)單做一下拷貝多一份的處理，比較粗暴！

PS: 有感興趣有想法的，歡迎留言評(píng)論，歡迎指教~

原文放在自己的博客上: http://shellphon.wang/githubl...

GPU云服務(wù)器云服務(wù)器旋轉(zhuǎn)木馬旋轉(zhuǎn)木馬實(shí)例 jquery旋轉(zhuǎn)木馬 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/88210.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

高璐

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

RackNerd：$19.99/年KVM-1.8GB/28GB/3TB/洛杉磯機(jī)房

閱讀 2865·2021-07-30 15:30
Web前端開(kāi)發(fā)標(biāo)準(zhǔn)規(guī)范

閱讀 560·2019-08-30 15:55
讀redux源碼總結(jié)

閱讀 1627·2019-08-26 17:04
History對(duì)象

閱讀 639·2019-08-26 11:36
閾值報(bào)警功能

閱讀 2078·2019-08-26 10:58
如何開(kāi)發(fā)一個(gè)基于 Vue 的 ui 組件庫(kù)（一）

閱讀 3556·2019-08-23 14:34
在Ubuntu Server中安裝apache

閱讀 1564·2019-08-22 18:48
記一次簡(jiǎn)單的DOM XSS攻擊實(shí)驗(yàn)

閱讀 2532·2019-08-21 17:51

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

vue實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播

相關(guān)文章