JQuery 自定义CircleAnimation,Animate方法学习笔记

在此贴出一些学习成果,希望能对学习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;

(0)

相关推荐

  • JQuery动画animate的stop方法使用详解

    animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css

  • jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. animate()方法的使用: 方式一: 以"属性名/值"对象的方式定义动画终止样式属性.例如: 复制代码 代码如下: $("div").animate( {width:"1000px"}) 以上代码能够将div从原有的宽度调整到1000px.也可以一次性

  • 基于jquery animate操作css样式属性小结

    昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi

  • jquery animate实现鼠标放上去显示离开隐藏效果

    1.CSS样式: 复制代码 代码如下: @CHARSET "UTF-8"; * html .showbox,* html .overlay { position: absolute; top: expression(eval(document.documentElement.scrollTop) ); } #AjaxLoading { border: 1px solid #8CBEDA; color: #37a; font-size: 12px; font-weight: bold;

  • jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码

  • jQuery动画animate方法使用介绍

    复制代码 代码如下: $(function() { $("#left").click(function(){ $(".block").show(); $(".block").animate({ width: "+200px", height: "+200px", fontSize: "1em", borderWidth: 10 }, "slow","swin

  • JQuery 自定义CircleAnimation,Animate方法学习笔记

    在此贴出一些学习成果,希望能对学习JQuery的其他同学有所帮助,同时也记录下自己的学习情况. 看了一些JQuery的官方教程,已经有点心潮澎湃了,就决定自己尝试着写一些东西出来.我看到了很多很绚的动画效果,然后决定自己也尝试一下,我决定要写一个圆周运动的动画效果,下面贴出js代码 复制代码 代码如下: var CircleAnimation = function (center_left, center_top, id, clockwise, duration) { return new Ci

  • 深入理解jquery自定义动画animate()

    在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行.但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash.这里 说的取代是网页特效部分,而不是动画.网页特效比如:渐变菜单.渐进显示.图片轮播等:而动画比如:故事情节广告.MV 等等. 如果复制当前代码进行在本地测试的时候,请注意把不需要(其他功能展示)的代码注释掉. <!DOCTYPE html> <html xmlns="http://www.w3.org/1

  • c#中的扩展方法学习笔记

    前言 最近在看王清培前辈的.NET框架设计时,当中有提到扩展方法 . 开头的一句话是:扩展方法是让我们在不改变类原有代码的情况下动态地添加方法的方式,这给面向对象设计 模块设计带来了质的提升 很明显,扩展方法在框架设计或者平时码代码中,是能够提升我们整个架构的灵活性的 简介 扩展方法被定义为静态方法,但它们是通过实例方法语法进行调用的. 它们的第一个参数指定该方法作用于哪个类型,并且该参数以 this 修饰符为前缀. 扩展方法当然不能破坏面向对象封装的概念,所以只能是访问所扩展类的public成

  • Lua中的元表和元方法学习笔记

    元表(metatable)是 Lua 里每种类型的值的默认操作方式的集合,例如,数字可以加减乘除.字符串可以连接合并.table 可以插入一对 key-value 值.函数可以被调用等等,这些操作都遵循其预定义的行为来执行. 而值的默认操作方式不是一成不变的,可以通过元表来修改其行为表现,或者是新定义一些默认没有的操作.例如,当两个 table 相加时, Lua 会检查它们之间的元表里是否有 "__add" 这个函数,如果定义有这个函数, 则调用这个函数来执行一次加法操作. 这里,相加

  • php cookie使用方法学习笔记分享

    PHP setcookie() 函数向客户端发送一个 HTTP cookie.cookie 是由服务器发送到浏览器的变量.cookie 通常是服务器嵌入到用户计算机中的小文本文件.每当计算机通过浏览器请求一个页面,就会发送这个 cookie.cookie 的名称指定为相同名称的变量.例如,如果被发送的 cookie 名为 "name",会自动创建名为 $user 的变量,包含 cookie 的值. 必须在任何其他输出发送前对 cookie 进行赋值.如果成功,则该函数返回 true,否

  • PHP getID3类的使用方法学习笔记【附getID3源码下载】

    本文实例讲述了PHP getID3类的使用方法.分享给大家供大家参考,具体如下: 网上描述: getID3()这个PHP脚本能够从MP3或其它媒体文件中提取有用的信息如:ID3标签,bitrate,播放时间等. (格式包括:Ogg,WMA,WMV,ASF,WAV,AVI,AAC,VQF,FLAC,MusePack,Real,QuickTime,Monkey's Audio,MIDI等). 官方网址:https://www.getid3.org/. 功能: 使用这个方法,可以获得音频.视频.图片等

  • jQuery自定义滚动条完整实例

    本文实例讲述了jQuery自定义滚动条实现方法.分享给大家供大家参考,具体如下: 很多时候,由于美观上的考虑,往往需要自定义各种各样的滚动条,因此,本人做了一个demo 运行效果截图如下: 以下是代码部分: <html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(

  • jQuery中使用animate自定义动画的方法

    动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别. $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画. 语法: 1 .animate( properties [, duration ]

  • Angular.js自定义指令学习笔记实例

    本文给大家分享angular.js学习笔记之自定义指令实例代码讲解,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularDirective</title> <script src="http://cdn.bootcss.com/angular.js/1.4.6

  • Ajax学习笔记---3种Ajax的实现方法【推荐】

    Ajax:  Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司

随机推荐