最新消息:

第95款插件:wodry.js是一个简单的文本翻转/文本旋转插件

Jquery插件 杨红伟 2378浏览 0评论

一、插件介绍

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

二、插件图片示例

三、插件作者下载地址

作者:Sergey Golovin 
作者邮箱: golovim@gmail.com
插件下载地址: http://www.ijquery.cn/js/wodry.js
官网文档: http://www.ijquery.cn/demo/wodry/index-en.html
官网文档本地翻译: http://www.ijquery.cn/demo/wodry/index-cn.html

三、插件参数

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};

四、使用教程

 

JS代码和CSS代码:

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/wodry/wodry.min.js"></script>
<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>

HTML代码:

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

调用参数:

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

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

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址