最近在玩个球（绿色的小东西）。如大家所见哈~~在所有页面都有个小直男针（呸，是指南针好吗！）他会到处乱跑而且会转动。之所以做这个，是因为之前看到有人的博客左下角有两个圆圈一直在转，觉得挺有趣的，然后仔细一想，也就是CSS3+JS的定时器就可以了，所以我也来玩玩~~~~正好呢很久没点开果壳任意门，最近又觉得很好玩，而且他的小直男针转动效果我也觉得简单有趣，于是就直接copy了他的图，然后借鉴了下效果，再开一下脑洞，做了这个~~~。

那么首先我们来点击一下下面这些按钮

可以看到每次点击都有不同的效果，好吧这很简单…………….

下面分几步来讲一下我是怎么实现他的~~事先说一句：半桶水的前端发这种东西感觉很忐忑啊，有更好方法实现的请在评论里面糊我熊脸谢谢。

第一步是要引用jquery，这个就不用我说了吧。

然后是定时器，jquery提供的，要让他自动的执行动作就要靠这个神器啦~~~

 

好了有了定时器之后，我们只需要在规定的时间动起来就好，下面是random效果（至于为什么用jQuery而不用$嘛………因为之前jq加载有点问题，现在还在解决我也懒得改这部分代码了）

还是先来看看第一个效果吧：

用jq通过id取得元素，然后用offset改变他的坐标。这里说个看起来有点奇怪的地方，有了off之后还有x和y看起来是不是有点多余？如果你也这么想就跟我之前一样，其实offset不是重置坐标，而是坐标位移量，所以当这个”#guoke”超出屏幕大小时，如果把off.x=0;off.y=0;的话并不能让他回到左上角，只能让他原地不动。于是我用x和y记录一直以来的位移量，在必要的时候减去他回到原位（感觉好挫，谁有好方法教教我谢谢。发博文老是出馊主意还只是让指望别人帮我忙真是对不起大家了Orz）

于是下面给多个效果：

这里用到的是animate()，效果是可以看到他移动的过程。这两个函数看起来很相似，只是一个固定在左边移动，一个全屏跑来跑去。

最后来看看旋转：

 

嘛，这个就很简单了，只是设置css而已，这个是利用了css3的rotate。有兴趣的同学可以F12看看我打印出来的ran值，你们可以直接修改。

——————————————————————————————————————–