您的位置:时时app平台注册网站 > 彩世界网址 > JQuery 自定义CircleAnimation,Animate方法学习笔记_j

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

2019-11-28 03:10

在这里贴出一些上学成果,希望能对上学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 = $; if return; currentPoint = { x: this.item.css == "auto" ? 0 : String).replace - center_left, y: this.item.css == "auto" ? 0 : String.replace - center_top }; center_left = center_left; center_top = center_top; if (currentPoint.x == 0 && currentPoint.y == 0) return; r = Math.pow(Math.pow Math.pow, 0.5); var flag = false; var caculateMiniAngle = function { //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 * 2 * r > 1) { return caculateMiniAngle; } else { return angle; } } miniAngle = caculateMiniAngle; //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; this.item.data("clockwise", clockwise); this.item.data("miniAngle", miniAngle); this.item.data; //this.item.data("startX", this.startX); }, start: function () { var element; if element = $("#" this.id.toString; else element = this.item; element.animate({ left: 1, top: 1 }, { duration: element.data, step: CircleAnimation.fn.caculateNextPoint }); }, caculateNextPoint: function () { var el; el = $( "#" this.id.toString; var sin = el.data.y / el.data; var angle = Math.asin; if (el.data.x < 0) angle = Math.PI - angle; //caculate the angle diff between current point angle and next point angle var anglediff = el.data; if != undefined) anglediff = 2 * Math.PI * 13 / el.data; if angle = angle - anglediff; else angle = angle anglediff; var y = el.data * Math.sin; var x = el.data * Math.cos; var fx = arguments[1]; //set duration big enough then circle animation never stop fx.options.duration = - fx.startTime 10000; if fx.now = y el.data; if fx.now = x el.data; el.data( "currentPoint", { x: x, y: y }); }, stop: function () { this.item.queue; this.item.stop(); } }; CircleAnimation.fn.init.prototype = CircleAnimation.fn;

本文由时时app平台注册网站发布于彩世界网址,转载请注明出处:JQuery 自定义CircleAnimation,Animate方法学习笔记_j

关键词: