                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS3+JS 实现超炫的散列画廊特效

圆形效果实现

各位亲帮帮忙，特别想知道这个效果怎么做~~~

01:01

fighter_fighting

2015-05-27

源自：CSS3+JS 实现超炫的散列画廊特效 4-2

关注问题我要回答

1021

操作

收起

3 回答

中古
2015-07-21

var ranges = range();

这个一直都有，不用添加，在刚才添加的内容多写了一行这个

0 回复有任何疑惑可以回复我~

收起回答

中古
2015-07-21

刚做了

圆形效果

各位看看行不行

修改 rsort 函数

将下面内容删除或注销

// 把海报分为左、右区域两个部分
 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)';
}

在删除内容上添加新的内容

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 为半径值;
}

修改完成，如有疑问，请回复