                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS3+JS 實現(xiàn)超炫的散列畫廊特效

圓形效果實現(xiàn)

各位親幫幫忙，特別想知道這個效果怎么做~~~

01:01

fighter_fighting

2015-05-27

源自：CSS3+JS 實現(xiàn)超炫的散列畫廊特效 4-2

關(guān)注問題我要回答

976

操作

收起

3 回答

中古
2015-07-21

var?ranges?=?range();

這個一直都有，不用添加，在剛才添加的內(nèi)容多寫了一行這個

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

中古
2015-07-21

剛做了

圓形效果

各位看看行不行

修改?rsort 函數(shù)

將下面內(nèi)容刪除或注銷

//?把海報分為左、右區(qū)域兩個部分
?var?photos_left?=?photos.splice(0,?Math.ceil(photos.length/2));
?var?photos_right?=?photos;

?for(?s?in?photos_left?){
????var?photo?=?photos_left[s];

????photo.style.left?=?random(ranges.left.x)+"px";
????photo.style.top?=?random(ranges.left.y)+"px";

?????photo.style['transform']?=?'rotate('+random([-80,80])+'deg)?scale(1)';
?}
?for(?s?in?photos_right?){
?????var?photo?=?photos_right[s];

?????photo.style.left?=?random(ranges.right.x)+"px";
?????photo.style.top?=?random(ranges.right.y)+"px";

?????photo.style['transform']?=?'rotate('+random([-80,80])+'deg)?scale(1)';
}

在刪除內(nèi)容上添加新的內(nèi)容

var?ranges?=?range();
for(?s?in?photos){
???var?photo?=?photos[s];
???var?ang?=?random([0,360])
???var?avg?=?ang*2*Math.PI/360;
???var?ang?=?-ang;
???photo.style['transform']?=?'translate('+500*Math.sin(avg)+'px,'+500*Math.cos(avg)+'px)?rotate('+ang+'deg)?scale(1)';
????//?500?為半徑值;
}

修改完成，如有疑問，請回復(fù)