在此贴出一些学习成果，希望能对学习JQuery的其他同学有所帮助，同时也记录下自己的学习情况。

看了一些JQuery的官方教程，已经有点心潮澎湃了，就决定自己尝试着写一些东西出来。我看到了很多很绚的动画效果，然后决定自己也尝试一下，我决定要写一个圆周运动的动画效果，下面贴出js代码

复制代码 代码如下:

var CircleAnimation = function (center_left, center_top, id, clockwise, duration) {

return new CircleAnimation.fn.init(center_left, center_top, id, clockwise, duration);

};

CircleAnimation.fn = CircleAnimation.prototype = {

item: {},

init:

function (center_left, center_top, id, clockwise, duration) {

this.item = $("#" + id + "");

if (!this.item[0])

return;

currentPoint = {

x: this.item.css("left") == "auto" ? 0 : String(this.item.css("left")).replace("px", "") - center_left,

y: this.item.css("top") == "auto" ? 0 : String(this.item.css("top")).replace("px", "") - center_top

};

center_left = center_left;

center_top = center_top;

if (currentPoint.x == 0 && currentPoint.y == 0)

return;

r = Math.pow(Math.pow(currentPoint.x, 2) + Math.pow(currentPoint.y, 2), 0.5);

var flag = false;

var caculateMiniAngle = function (angle) {

//caculate the minimum angle diff, if the distance between 2 points less than 1px, we think this 2 ponits angle should be the minimum angle diff

if (Math.sin(angle / 2) * 2 * r > 1) {

return caculateMiniAngle(angle / 2);

}

else {

return angle;

}

}

miniAngle = caculateMiniAngle(Math.PI / 4);

//store data to dom element

this.item.data("currentPoint", currentPoint);

this.item.data("center_left", center_left);

this.item.data("center_top", center_top);

this.item.data("r", r);

this.item.data("clockwise", clockwise);

this.item.data("miniAngle", miniAngle);

this.item.data("duration", duration);

//this.item.data("startX", this.startX);

},

start:

function () {

var element;

if (this.id)

element = $("#" + this.id.toString());

else

element = this.item;

element.animate({ left: 1, top: 1 }, {

duration: element.data(

"duration"),

step: CircleAnimation.fn.caculateNextPoint

});

},

caculateNextPoint:

function () {

var el;

el = $(

"#" + this.id.toString());

var sin = el.data("currentPoint").y / el.data("r");

var angle = Math.asin(sin);

if (el.data("currentPoint").x < 0)

angle = Math.PI - angle;

//caculate the angle diff between current point angle and next point angle

var anglediff = el.data("miniAngle");

if (el.data("duration") != undefined)

anglediff = 2 * Math.PI * 13 / el.data(

"duration");

if (el.data("clockwise"))

angle = angle - anglediff;

else

angle = angle + anglediff;

var y = el.data("r") * Math.sin(angle);

var x = el.data("r") * Math.cos(angle);

var fx = arguments[1];

//set duration big enough then circle animation never stop

fx.options.duration = (

new Date).getTime() - fx.startTime + 10000;

if (fx.prop == "top")

fx.now = y + el.data(

"center_top");

if (fx.prop == "left")

fx.now = x + el.data(

"center_left");

el.data(

"currentPoint", { x: x, y: y });

},

stop:

function () {

this.item.queue("fx", []);

this.item.stop();

}

};

CircleAnimation.fn.init.prototype = CircleAnimation.fn;