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

資訊專欄INFORMATION COLUMN

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

waltr / 808人閱讀

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

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

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

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

關(guān)于計算

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

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

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

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

vue實現(xiàn)

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

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

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

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

對于數(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ù)則拷貝多一個數(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ù)增長
    obj.left = i*gap;
    //層疊參數(shù)逐級增1
    obj.zIndex = i+1;
    //透明度則簡單做逐級增大
    obj.opacity = 1/(level+1-i);
    //寬高則按距離中間項的個數(shù)來選擇縮放
    obj.width = that.curWidth*Math.pow(that.scale,level-i);
    obj.height = that.curHeight*Math.pow(that.scale,level-i);
    //底部距離取最大高與當(dāng)前項高差的一半
    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.

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111850.html

相關(guān)文章

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

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

    高璐 評論0 收藏0

  • 網(wǎng)易音樂版輪播-react組件版本

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

    趙春朋 評論0 收藏0

  • 網(wǎng)易音樂版輪播-react組件版本

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

    whidy 評論0 收藏0

  • 網(wǎng)易音樂版輪播-react組件版本

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

    Tikitoo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<