可带动画效果的文本翻转旋转特效的JQuery插件wodry

简介

Wodry.js 是一个简单的文本翻转旋转jQuery插件。 Wodry.js有一些参数设置，允许你设置动画，如文本翻转和文本旋转，可以设置自己的回调内容翻转等。

（下载附件中带DEMO）

参数：

separator: 在翻转的文本中设置分割 默认: '|';
delay: 设置延迟的作用 默认: 2000;
animationDuration: 设置动画持续时间 默认: 500;
animation: 设置动画的类型 默认: 'rotateY'，参数有动画列表:
rotateX, rotateY, rotateAll, scaleX, scaleY, scaleAll, clockwise, anticlockwise;
callback: 设置一个回调，要求每次迭代。 默认: 空;
shift: 指定X，Y和Z值的变化。 默认: {x:0,y:0,z:0};

[CSS]
<style type="text/css">
.adjecting {display: inline-block;position: relative;-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;
  transform-style: preserve-3d;-webkit-transform-origin-x: 50%;}
.adjecting .front-face, .adjecting .back-face {display: inline-block;-webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;-ms-backface-visibility:hidden;-o-backface-visibility: hidden;
  backface-visibility: hidden;}
.adjecting .front-face {position: absolute;}
.adjecting .back-face {position: relative;}
</style>

使用

1  引入 jquery.js 和 Wodry.js 文件

2.  HTML

<div class="wodry">一款简单的插件|一款内容的翻转的插件|一款写在 CoffeeScript 里的插件</div>

3.  调用

$('.wodry').wodry({	animation: 'rotateAll',	delay: 1000});

当然把 animation 换成  rotateX, rotateY, rotateAll, scaleX, scaleY, scaleAll, clockwise, anticlockwise  就可以看到所有的效果！

相关链接

官网地址 ：http://www.ijquery.cn/study/demo/wodry/index-cn.html#about