Lazy Susan

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Lazy Susan.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'lazySusan'
      });
   });
</script>

Water Wheel

A vertical version of the Lazy Susan shape.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Water Wheel.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'waterWheel'
      });
   });
</script>

Figure 8

Items travel in a horizontal figure-8.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Figure 8.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'figure8'
      });
   });
</script>

Square

Items move in a flat, square shape.

  • :)
  • :D
  • :p
  • :*
Try it! The Square.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'square'
      });
   });
</script>

Conveyor Belt (Left)

Items travel in a conveyor-belt angled towards the left.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Conveyor Belt (Left).
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'conveyorBeltLeft'
      });
   });
</script>

Conveyor Belt (Right)

Items travel in a conveyor-belt angled towards the right.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Conveyor Belt (Right).
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'conveyorBeltRight'
      });
   });
</script>

Diagonal Ring (Left)

Similar to the Lazy Susan, but the left side is tilted up.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Diagonal Ring (Left).
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'diagonalRingLeft'
      });
   });
</script>

Diagonal Ring (Right)

Similar to the Lazy Susan, but the right side is tilted up.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Diagonal Ring (Right).
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'diagonalRingRight'
      });
   });
</script>

Roller Coaster Added in v1.1

Wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!

Because this one can be kind of weird if you have just the right number of elements in your Roundabout, changing the tilt increases the number of waves in the coaster.

  • :)
  • :D
  • :p
  • :*
  • :B
  • :p
  • :*
  • :B
Try it! The Roller Coaster.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'rollerCoaster'
      });
   });
</script>

Tear Drop Added in v1.1

The front side is pointy, but the back side is rounded. Changing the tilt with this shape makes a spiral pattern (although the part that you probably want in front is in the back).

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Tear Drop.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'tearDrop'
      });
   });
</script>

More Shapes, More Fun than Useful

The Juggler

Sort of a helix-type path.

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Juggler.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'theJuggler'
      });
   });
</script>

Goodbye Cruel World

Towards the end of an animation that will put a moving item into focus, the item drops sharply off the screen. (Or, will jump quickly out of no where, depending on which direction you move.)

  • :)
  • :D
  • :p
  • :*
  • :B
Try it! The Goodbye Cruel World.
<script>
   $(document).ready(function() {
      $('ul').roundabout({
         shape: 'goodbyeCruelWorld'
      });
   });
</script>
>
下载代码说明
X关闭

12款多方向(角度)旋转的3D按钮风格

多款不同角度旋转的3D按钮风格,可惜的是部分代码采用CSS3实现,IE下效果不近完美,同学们只能在火狐等浏览器下观赏了。 附件提供了12种不同角度旋转的效果,基本上你能想到的它都已经实现啦。作者推荐下载,感兴趣的你可不要错过了哈,希望对你学习有所帮助