vue實現旋轉木馬輪播

高璐發布于2019-08-21 15:32 / 991人閱讀

摘要：關于旋轉木馬效果實用例子一個實際應用在優酷的頻道頁。將對的數據操作轉化為數組，數組元素存儲各項的數據寬高絕對定位偏移值透明度以及層疊參數，在模板處遍歷實際項目的數組，其樣式則通過索引獲取對數組的元素數據。

同事拿到個設計稿,是旋轉木馬的輪播效果,于是網上找了一下,發現了jquery實現的效果,一有空就看看源碼，研究其實現原理，想著用vue的數據驅動方式來實現一個，但這個效果跟以往做的demo效果不同，每次思考實現都被卡住了。拖延了好些日子，后來腦子一轉，居然想到方案了，于是動手實現了下。

關于旋轉木馬效果實用例子：一個實際應用在優酷的頻道頁。

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

關于計算

插件接受指定的幾個數據：整體寬高，主項寬高（中間最大），其他項依次縮小的比例。

關于位置，如圖：

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

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

vue實現

vue的理念是數據驅動，所以要把jquery插件那套實現做一下轉化。同樣，也是接受幾個靜態數據：整體寬高、中間項寬高、縮小比例。

將jquery對dom的數據操作轉化為數組store，數組元素存儲各項dom的數據（寬高、絕對定位偏移值、透明度以及層疊參數），在模板處遍歷實際項目的數組，其樣式則通過索引獲取對store數組的元素數據。

切換數據通過對store進行出隊、入隊或反向出隊和入隊操作以達到切換邏輯；再通過樣式設定transition來設置動畫效果即可。

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

對于數據的初始化，代碼如下：

 //store數組
 var items = [];

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

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

 //如果數據是偶數則拷貝多一個數據.
 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倍數增長
    obj.left = i*gap;
    //層疊參數逐級增1
    obj.zIndex = i+1;
    //透明度則簡單做逐級增大
    obj.opacity = 1/(level+1-i);
    //寬高則按距離中間項的個數來選擇縮放
    obj.width = that.curWidth*Math.pow(that.scale,level-i);
    obj.height = that.curHeight*Math.pow(that.scale,level-i);
    //底部距離取最大高與當前項高差的一半
    obj.bottom = (that.allHeight-obj.height)/2;
    items.push(obj);
  });
  //遍歷右邊部分，包含中間項
  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);
    //偏移值可以反向思考，通過全寬減去距離右邊偏移以及自身寬度
    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"
  }

加上定時器和方向選擇，效果就出來了，如下：

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

訪問不了可以看runjs.

剛開始一直思維繞不過去，一直無從下手，然而當抓到突破點的時候，其實寫出來，發現挺簡單的！

不過在偶數項處理方面，我只是簡單做一下拷貝多一份的處理，比較粗暴！

PS: 有感興趣有想法的，歡迎留言評論，歡迎指教~

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

GPU云服務器云服務器旋轉木馬旋轉木馬實例 jquery旋轉木馬 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88210.html

vue實現旋轉木馬輪播

摘要：關于旋轉木馬效果實用例子一個實際應用在優酷的頻道頁。將對的數據操作轉化為數組，數組元素存儲各項的數據寬高絕對定位偏移值透明度以及層疊參數，在模板處遍歷實際項目的數組，其樣式則通過索引獲取對數組的元素數據。同事拿到個設計稿,是旋轉木馬的輪播效果,于是網上找了一下,發現了jquery實現的效果,一有空就看看源碼，研究其實現原理，想著用vue的數據驅動方式來實現一個，但這個效果跟以往做的d...

waltr 2019-08-29 12:22 評論0 收藏0
網易音樂版輪播-react組件版本

摘要：說明此版本輪播圖為仿照網易云音樂播放器上首頁的輪播。網易的輪播特殊的地方就在于，如果你滑動不相鄰的兩張圖片，其過渡效果并不是滑動過渡，而是一個跳出過渡，此方面原理與最開始設計輪播排版時候有極大關聯。說明：此版本輪播圖為仿照網易云音樂PC播放器上首頁的輪播。網易的輪播特殊的地方就在于，如果你滑動不相鄰的兩張圖片，其過渡效果并不是滑動過渡，而是一個跳出過渡，此方面原理與最開始設計輪播...

趙春朋 2019-08-30 13:59 評論0 收藏0
網易音樂版輪播-react組件版本

摘要：說明此版本輪播圖為仿照網易云音樂播放器上首頁的輪播。網易的輪播特殊的地方就在于，如果你滑動不相鄰的兩張圖片，其過渡效果并不是滑動過渡，而是一個跳出過渡，此方面原理與最開始設計輪播排版時候有極大關聯。說明：此版本輪播圖為仿照網易云音樂PC播放器上首頁的輪播。網易的輪播特殊的地方就在于，如果你滑動不相鄰的兩張圖片，其過渡效果并不是滑動過渡，而是一個跳出過渡，此方面原理與最開始設計輪播...

whidy 2019-08-01 18:38 評論0 收藏0
網易音樂版輪播-react組件版本

摘要：說明此版本輪播圖為仿照網易云音樂播放器上首頁的輪播。網易的輪播特殊的地方就在于，如果你滑動不相鄰的兩張圖片，其過渡效果并不是滑動過渡，而是一個跳出過渡，此方面原理與最開始設計輪播排版時候有極大關聯。說明：此版本輪播圖為仿照網易云音樂PC播放器上首頁的輪播。網易的輪播特殊的地方就在于，如果你滑動不相鄰的兩張圖片，其過渡效果并不是滑動過渡，而是一個跳出過渡，此方面原理與最開始設計輪播...

Tikitoo 2019-08-22 14:47 評論0 收藏0