圆形效果实现

来源:4-2 拓展与总结

fighter_fighting

2015-05-27 17:35

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

写回答 关注

3回答

  • 中古
    2015-07-21 17:06:06
    var ranges = range();

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

  • 中古
    2015-07-21 17:02:38

    刚做了

    圆形效果

    各位看看行不行

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

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

    微风灬唐唐

    想问下为什么最后要把角度反转一下?还有怎么样可以让图片可以比较分散,而不会聚在一起

    2017-12-19 18:50:03

    共 2 条回复 >

  • qq_邢武坤_0
    2015-07-15 17:57:56

    同求答案

CSS3+JS 实现超炫的散列画廊特效

实现更自由的切换照片的画廊效果,打造超酷的切换动画

46091 学习 · 215 问题

查看课程

相似问题