百葉窗動畫思路

2021-07-05 01:09:30 字數 848 閱讀 2145

相信大家都見過百葉窗動畫效果，那麼我就簡單的給大家介紹一下這個百葉窗的動畫效果是怎麼 實現的

首先 我們要建立乙個大的div來承載我們切圖後的小div

我覺得 百葉窗的難點就難在 如何將一張大於切割成若干的小圖

在切割之前 我們要先確認好切割多少張

var col =


10;//定義切割的列數


varrows


=4;//定義切割的行數
然後再進行迴圈 建立div 最好是先建立乙個文件碎片用來儲存 所建立的div 已減少新增到容器中回流的次數 減少效能消耗（關於回流重繪 可以在我部落格裡面找專題，這裡我就不細說了）

var a=;


var frg=document.createdocumentfragment();


for(var i=0;ivar odiv=document.createelement("div");


var w=box.offsetwidth;


var h=box.offsetheight;


with(odiv.style)


a.push(odiv)


}
建立好這些小的div 之後就可以讓其動起來了 可以用我先前寫好的tween動畫庫

就可以達到 百葉窗的效果了

簡單的**如下

var odivs=box.getelementsbytagname("div");


for(var i=0;i< a.length;i++),200,['back','easeinout'])


},400*(i%col))


})(i)


}

百葉窗效果

doctype html html lang en head meta charset utf 8 title 百葉窗效果 title style body box box li box li div box li div p style head body ul class box id box1...

WPF Clip實現百葉窗

原文 wpf clip實現百葉窗 效果圖 後台 public mainwindow pathgeometry pg null dispatchertimer timer null 設定矩形的大小 double size 100 矩形的初始寬度 double size1 0 private void ...

html實現百葉窗效果

html實現百葉窗效果 原理很簡單就是相當於把分成n份開始輪播，下面開始上 並解析其步驟 style中的 當然這裡要用到絕對定位 byc 想分成幾份 子容器的寬度就是父容器的寬度 份數 也要用定位超出的部分讓其隱藏 byc div byc div p 新增 本次例項用了五張 byc div p nt...