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

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

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

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

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

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

 

//ran作为随机数，他决定现在使用哪个效果
var ran=Math.random()*1200;
//off对象用来配合offset()方法来改变指南针的坐标
var off=new Object();
off.left=0;
off.top=0;

var x=0;
var y=0;
var r=0;
//定时器，每隔几秒就会执行一次当前的效果
setInterval(function () {	
		if(ran<200)
			random1();		
		else if(ran<600)	
			random2();
		else if(ran<1000)
			random3();
		else if(ran<1100)
			random4();
		else if(ran<1150)
			random5();
		else if(ran<1200)
			random6();
			
}, 4000);

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

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

function random1(){
	off.left=Math.random()*500+300;
	off.top=Math.random()*500+400;
	x+=off.left;
	y+=off.top;
	if(y>=1150||x>=700)
	{
		off.top=0-y+10;
		off.left=0-x+10;
		y=10;
		x=10;
	}
	myrotate();	
	jQuery("#guoke").offset(off);
}

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

于是下面给多个效果：

function random2(){
	x=Math.random()*70-55;
	y=Math.random()*300+100;
	myrotate();
	jQuery("#guoke").animate({left:x,top:y});
		
}
function random3(){
	x=Math.random()*1000;
	y=Math.random()*500+100;

	myrotate();
	jQuery("#guoke").animate({left:x,top:y});		
}

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

最后来看看旋转：

 

function myrotate(){
	r=Math.random()*2000;
	jQuery('#guoke').css("transform","rotate(-"+r+"deg)");
	jQuery('#guoke').css("-moz-transform","rotate(-"+r+"deg)");
	jQuery('#guoke').css("-webkit-transform","rotate(-"+r+"deg)");
}

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

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