最近对看了一些JQuery的基础教程，被JQuery深深的吸引住了，以前用过Extjs，看了JQuery不禁感叹，javascript还能这么些，真是太神奇了！

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

 

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

 

  1 var CircleAnimation = function (center_left, center_top, id, clockwise, duration) {
  2 return new CircleAnimation.fn.init(center_left, center_top, id, clockwise, duration);
  3 };
  4 
  5 CircleAnimation.fn = CircleAnimation.prototype = {
  6 item: {},
  7  init: 
  8 function (center_left, center_top, id, clockwise, duration) {
  9 this.item = $("#" + id + "");
 10 if (!this.item[0])
 11 return;
 12  currentPoint = {
 13 x: this.item.css("left") == "auto" ? 0 : String(this.item.css("left")).replace("px", "") - center_left,
 14 y: this.item.css("top") == "auto" ? 0 : String(this.item.css("top")).replace("px", "") - center_top
 15 };
 16 center_left = center_left;
 17 center_top = center_top;
 18 if (currentPoint.x == 0 && currentPoint.y == 0)
 19 return;
 20 r = Math.pow(Math.pow(currentPoint.x, 2) + Math.pow(currentPoint.y, 2), 0.5);
 21 
 22 var flag = false;
 23 var caculateMiniAngle = function (angle) {
 24 //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
 25 if (Math.sin(angle / 2) * 2 * r > 1) {
 26 return caculateMiniAngle(angle / 2);
 27 } 
 28 else {
 29 return angle;
 30 }
 31 }
 32 
 33  miniAngle = caculateMiniAngle(Math.PI / 4);
 34 
 35 //store data to dom element
 36 this.item.data("currentPoint", currentPoint);
 37 this.item.data("center_left", center_left);
 38 this.item.data("center_top", center_top);
 39 this.item.data("r", r);
 40 this.item.data("clockwise", clockwise);
 41 this.item.data("miniAngle", miniAngle);
 42 this.item.data("duration", duration);
 43 //this.item.data("startX", this.startX);
 44 },
 45 
 46 start: 
 47 function () {
 48 var element;
 49 if (this.id)
 50 element = $("#" + this.id.toString());
 51 else
 52 element = this.item;
 53 
 54 element.animate({ left: 1, top: 1 }, {
 55 duration: element.data(
 56 "duration"),
 57 step: CircleAnimation.fn.caculateNextPoint
 58 });
 59 },
 60 
 61 caculateNextPoint: 
 62 function () {
 63 var el;
 64 el = $(
 65 "#" + this.id.toString());
 66 var sin = el.data("currentPoint").y / el.data("r");
 67 var angle = Math.asin(sin);
 68 if (el.data("currentPoint").x < 0)
 69 angle = Math.PI - angle;
 70 //caculate the angle diff between current point angle and next point angle
 71 var anglediff = el.data("miniAngle");
 72 if (el.data("duration") != undefined)
 73 anglediff = 2 * Math.PI * 13 / el.data(
 74 "duration");
 75 if (el.data("clockwise"))
 76 angle = angle - anglediff;
 77 else
 78 angle = angle + anglediff;
 79 var y = el.data("r") * Math.sin(angle);
 80 var x = el.data("r") * Math.cos(angle);
 81 var fx = arguments[1];
 82 //set duration big enough then circle animation never stop
 83 fx.options.duration = (
 84 new Date).getTime() - fx.startTime + 10000;
 85 if (fx.prop == "top")
 86 fx.now = y + el.data(
 87 "center_top");
 88 if (fx.prop == "left")
 89 fx.now = x + el.data(
 90 "center_left");
 91 el.data(
 92 "currentPoint", { x: x, y: y });
 93 },
 94 
 95 stop: 
 96 function () {
 97 this.item.queue("fx", []);
 98 this.item.stop();
 99 }
100 };
101 CircleAnimation.fn.init.prototype = CircleAnimation.fn;

（本人第一次写文章，还不知道怎么把demo page内嵌进来，希望知道的同学可以友情提示一下，多谢~）

需要调用只需新建一个CircleAnimation对象，参数分别是圆心位置（center_left, center_top），旋转效果元素id，是否顺时针旋转(clockwise),旋转周期（duratin）。然后调用对象start方法开始动画效果，调用stop方法停止动画效果。

 

 

作者: klice 发表于 2011-07-09 09:43 原文链接

Tag jquery,自定义circleanimation,animate方法学习笔记
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架