jQuery中有很多有趣的功能,其中一個是移動圓形的div。
var originX = 50; //圓心x坐標 var originY = 50; //圓心y坐標 var rotation = 0; //旋轉角度 var speed = 5; //移動速度 function moveCircle(){ rotation += speed; var x = originX + Math.cos(rotation*Math.PI/180)*50; var y = originY + Math.sin(rotation*Math.PI/180)*50; $('#circle').css({left:x+'%', top:y+'%'}); //不斷調用moveCircle()函數,實現(xiàn)循環(huán)移動 window.requestAnimationFrame(moveCircle); } moveCircle();
以上是移動圓形的div的代碼簡單實現(xiàn),其中要點是用sin和cos函數實現(xiàn)圓周上的點的坐標計算。這樣在不斷改變旋轉角度的情況下,就可以實現(xiàn)圓形div的旋轉移動。
如果要改變移動的方向和速度,只需要調整originX、originY和speed的值即可。希望這篇文章能幫助大家更好地理解jQuery的使用方法。
上一篇交換地點動畫css