头像挂件

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

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

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

头像挂件 动画图片素材

png 逐帧动画

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 就可显示水瓶 动画挂件

本文出自简爱博客,转载时请注明出处及相应链接。

评论

  1. adfun2017-03-10 23:30回复

    你好,前段时间emlog大博客备案所以无法访问,看到贵站撤销了链接,希望博主能够重新加上

  2. 污桐2017-03-02 19:56回复

    请问data-avatar-id=84怎么加这个?class=“”或者style=“”?能再详细点吗?[抱拳/]

    1. 简爱2017-03-04 09:13回复

      @污桐:<img data-avatar-id=84 ....>

  3. JQKing2016-10-23 00:09回复

    不会使用  只能看着

  4. 酷喵2016-07-31 19:08回复

    有创意[呲牙/]

  5. 吴尼玛2015-08-06 16:01回复

    [坏笑/]太个性了