一.瞄先生来咯

好吧，忙活了不少时间，搞定一个很cool的东西～，那就是本站的小天使，喵小凡先森，大家欢迎，～～～

就是我啦～～喵～

1.1来源

之前在这个

PDF之家 这个网站瞎逛，突然发现网站上弹出个小人

点了几下。拖了几下，发现蛮好玩的，习惯性的调试了下网站，发现了小人的JS代码，于是拉下来，

做了下修改和封装，修改几个BUG兼容AngularJS/增加手机端的触摸兼容/增加参数配置，等等。

总之就是根据本站小小修改了下啦。

然后又觉得只有一个小图片在上面不动不过瘾，于是给本站的喵小凡先森加上了尾巴摇动的动画，哈哈

二.喵先生的实现

这个动画使用了js,配合css实现，js动态增加css类型，css类型切换背景图片。

使用了4副小凡先生的图片

这个尾巴的动画差点玩死我了，像素级的编辑，还好能复制/旋转，搞了半天，起码尾巴甩起来还蛮飘逸的，HOHO

分别设置了4个css属性切换


.mumu.active.o1{
	background: url(../images/c1.png);
	width: 55px;
	height: 55px;
	margin: 0 auto;
}
.mumu.active.o1.o2{
	background: url(../images/c2.png);
	width: 55px;
	height: 55px;
	margin: 0 auto;
}
.mumu.active.o1.o2.o3{
	background: url(../images/c3.png);
	width: 55px;
	height: 55px;
	margin: 0 auto;
}
.mumu.active.o1.o2.o3.o4{
	background: url(../images/c4.png);
	width: 55px;
	height: 55px;
	margin: 0 auto;
}

然后配合js动态修改css

  Sprite.prototype.startAnimate = function() {

        var me = this;
        me.stopAnimate();
        $(me.default.sid).toggleClass("active");

        var index = 1;
        var isadd = true;

        me._timer = setInterval(function() {

            /*循环切换css,css中切换png图片 1234-》4321*/
            $(me.default.sid).toggleClass("o" + index);
            if (isadd)
                index++;
            else
                index--;
            if (index == 5) {
                isadd = false;
                index--;
            }
            if (index == 0) {
                isadd = true;
                index++;
            }

        }, 100);
    };

，

总的来说，效果还可以的样子。

三.瞄先生爱分享

3.1使用

感兴趣的同学自己下下来玩吧。

只依赖jquery,

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script   type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script>
<link rel="stylesheet"  href="sprite.css"></script>
<script   type="text/javascript" src="sprite.js"></script>
</head>
<body>

</body>
</html>