欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

jquery div圓移動(dòng)

錢斌斌2年前9瀏覽0評論

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的使用方法。