jQuery中有很多有趣的功能,其中一個(gè)是移動(dòng)圓形的div。
var originX = 50; //圓心x坐標(biāo) var originY = 50; //圓心y坐標(biāo) var rotation = 0; //旋轉(zhuǎn)角度 var speed = 5; //移動(dòng)速度 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+'%'}); //不斷調(diào)用moveCircle()函數(shù),實(shí)現(xiàn)循環(huán)移動(dòng) window.requestAnimationFrame(moveCircle); } moveCircle();
以上是移動(dòng)圓形的div的代碼簡單實(shí)現(xiàn),其中要點(diǎn)是用sin和cos函數(shù)實(shí)現(xiàn)圓周上的點(diǎn)的坐標(biāo)計(jì)算。這樣在不斷改變旋轉(zhuǎn)角度的情況下,就可以實(shí)現(xiàn)圓形div的旋轉(zhuǎn)移動(dòng)。
如果要改變移動(dòng)的方向和速度,只需要調(diào)整originX、originY和speed的值即可。希望這篇文章能幫助大家更好地理解jQuery的使用方法。