素材 来自 手机 QQ， 由于 手机 QQ 头像挂件使用的 动画 是 png 图片

昨天 3 个多小时写的，主要时间 都浪费在通过  background-position 实现动画的方法上，其中也走了不少歪路

写成了 这款 jQuery 插件， 可以循环显示 预置的图片，也可显示指定图片

头像挂件 动画图片素材

jQuery 插件地址： http://api.asilu.com/cdn/ja.avatar.js (IE10)

使用效果： http://www.gouji.org/?post=3

简单的使用方法就是

$('img.avatar').jaAvatar();

具体的配置参数

$('img.avatar').jaAvatar({

	animation: true, // 开启动画

	data: 'avatar-id', // 保存 ID 的 data 键名 $.data() 获取

	left: 0, // 左偏移

	top: 0, // 顶偏移

	all: true, // 是否全部显示

	// 循环输出 的 ID

	arr: [1,2,3,4,5,8,10,11,12,21,23,24,26,28,30,35,37,38,39,41,42,43,44,46,48,49,50,61,63,64,65,66,67,68,69,70,71,72,74,75,77,78,79,80,82,84,91,93,94,95,96,100,101,104,108,109,110,111,112,113,114,115,117,168,241,242,243,244,255,256,257,258,259,260,261,262,263], // 循环 挂件 ID (此处是全部 可酌情删除一些)

	speed: 300 // 动画速度

});

在 EMLOG 输出 头像的时候 为 头像 img 添加 data-avatar-id=84 就可显示水瓶 动画挂件