js通过按钮控制图片旋转代码

主页 M

js通过按钮控制图片旋转代码

2016-10-09 网页编程网 网页编程网

<script type="text/javascript">
function Path() {
	this.concat = int_concat;
	this.add = int_add;
	this.rotate = int_rot;
	function int_concat(p) {
		return new PathList(new Array(this, p));
	}
	function int_add(p) {
		return new PathAdd(this, p);
	}
	function int_rot(xc,yc,v) {
		return new RotatePath(this, xc, yc, v);
	}
}
// The following object is used for the concat
function PathList(inPathList) {
	// All path objects must have these 5 methods
	this.x  = 0;	// Retrieves the current x value
	this.y  = 0;
	this.step = int_step;			// Move to next step
	this.reset = int_reset;			// Resets the current position
	// The rest may vary from different path objects
	this.pathList = inPathList;
	this.currentPath = 0;
	function int_step() {
		if (this.currentPath >= this.pathList.length) return false;
		if (this.pathList[this.currentPath].step()) {
			this.x = this.pathList[this.currentPath].x;
			this.y = this.pathList[this.currentPath].y;
		}
		else {
			this.currentPath++;
			if (this.currentPath >= this.pathList.length) return false;
			this.x = this.pathList[this.currentPath].x;
			this.y = this.pathList[this.currentPath].y;
		}
		return true;
	}
	function int_reset() {
		this.currentPath = 0;
		for (var i=0; i<this.pathList.length; i++)
			this.pathList[i].reset();
		this.x = this.pathList[this.currentPath].x;
		this.y = this.pathList[this.currentPath].y;
	}
}
// The following object is used for adding two paths
function PathAdd(p1,p2) {
	// All path objects must have these 5 methods
	this.x  = 0;	// Retrieves the current x value
	this.y  = 0;
	this.step = int_step;			// Move to next step
	this.reset = int_reset;			// Resets the current position
	// The rest may vary from different path objects
	this._p1 = p1;
	this._p2 = p2;
	function int_step() {
		var c1 = this._p1.step();
		var c2 = this._p2.step();
		this.x = this._p1.x + this._p2.x;
		this.y = this._p1.y + this._p2.y;
		return (c1 || c2);
	}
	function int_reset() {
		this._p1.reset();
		this._p2.reset();
		this.x = this._p1.x + this._p2.x;
		this.y = this._p1.y + this._p1.y;
	}
}
function RotatePath(p,xc,yc,v) {
	this.x  = 0;	// Retrieves the current x value
	this.y  = 0;
	this.step = int_step;			// Move to next step
	this.reset = int_reset;			// Resets the current position
	// The rest may vary from different path objects
	this._p = p;
	this._xc = xc;
	this._yc = yc;
	this._v = v;
	function int_step() {
		var c = this._p.step();
		var pol = toPol(this._p.x - this._xc, this._p.y - this._yc);
		var rec = toRec(pol.r, pol.v + toRad(this._v));
		this.x = rec.x + this._xc;
		this.y = rec.y + this._yc;
		return c;
	}
	function int_reset() {
		this._p.reset();
		var pol = toPol(this._p.x - this._xc, this._p.y - this._yc);
		var rec = toRec(pol.r, pol.v + toRad(this._v));
		this.x = rec.x - this._xc;
		this.y = rec.y - this._yc;
	}
	function toPol(x,y) {
		var o = new Object();
		o.r = Math.sqrt(x*x + y*y);
		if (x == 0)
			o.v = Math.PI / 2;
		else
			o.v = Math.atan(y/x);
		if (x < 0)
			o.v = o.v + Math.PI;
		return o;
	}
	function toRec(r,v) {
		var o = new Object();
		o.x = r * Math.cos(v);
		o.y = r * Math.sin(v);
		return o;
	}
	function toRad(deg) {
		return deg*Math.PI/180;
	}
}
PathAdd.prototype    = new Path;
PathList.prototype   = new Path;
RotatePath.prototype = new Path;
</script>
<script type="text/javascript">
function CirclePath(x, y, _xr, _yr, fromV, toV, n) {
	// All path objects must have these 5 methods
	this.x  = 0;	// Retrieves the current x value
	this.y  = 0;
	this.step = int_step;			// Move to next step
	this.reset = int_reset;
	// The rest may vary from different path objects
	this.steps = n;			// NN work around. NN can't handle local variables!!!
	this.stepsLeft = n;
	this.xp = x;
	this.yp = y;
	this.v = -toRad(fromV);
	this.startV = this.v;
	this.endV = -toRad(toV);
	this.xr = _xr;
	this.yr = _yr;
	this.x = getX(this.xp,this.xr,this.v);
	this.y = getY(this.yp,this.yr,this.v);
	function toRad(deg) {
		return deg*Math.PI/180;
	}
	function getX(xp, xr, v) {
//		alert("xp: " + xp + "\nxr: " + xr + "\nv: " + v);
		return xp + xr*Math.cos(v);
	}
	function getY(yp, yr, v) {
		return yp + yr*Math.sin(v);
	}
// Initate steps
	if (this.steps > 0)
		this.deltaV = (this.endV - this.startV)/n;	// work around netscape bug. Netscape couldn't handle this
	else {									// as a local variable
		this.deltaV = 0;
		this.x = getX(this.xp,this.xr,this.endV);
		this.y = getY(this.yp,this.yr,this.endV);
	}
	function int_step() {
		if (this.stepsLeft > 0) {
			this.v += this.deltaV;
			this.x = getX(this.xp,this.xr,this.v);
			this.y = getY(this.yp,this.yr,this.v);
			this.stepsLeft--;
			return true;
		}
		return false;
	}
	function int_reset() {
		if (this.steps < 1) {
			this.x = getX(this.xp,this.xr,this.endV);
			this.y = getY(this.yp,this.yr,this.endV);
		}
		else {
			this.v = this.startV;
			this.x = getX(this.xp,this.xr,this.v);
			this.y = getY(this.yp,this.yr,this.v);
			this.stepsLeft = this.steps;
		}
	}
}
CirclePath.prototype = new Path;
</script>
<script type="text/javascript">
function StraightPath(fromX, fromY, toX, toY, n) {
	// All path objects must have these 5 methods
	this.x  = fromX;	// Retrieves the current x value
	this.y  = fromY;
	this.step = int_step;			// Move to next step
									// Returns true if the step was succesfull
									// Returns false when the path has been done
	this.reset = int_reset;
	// The rest may vary from different path objects
	this.startX = fromX;
	this.startY = fromY;
	this.endX = toX;
	this.endY = toY;
// Initiate steps
 	this.steps = n;
 	this.totalSteps = n;
 	if (this.totalSteps < 1) {	// No Amimation!
 		this.x = this.endX;
 		this.y = this.endY;
 		this.deltaX = 0;	// NN work around
 		this.deltaY = 0;
 	}
	else {
	 	this.deltaX = (this.endX - this.startX) / this.totalSteps;
		this.deltaY = (this.endY - this.startY) / this.totalSteps;
	}
	function int_step() {
		if (this.steps >= 0) {
			this.steps--;
			this.x += this.deltaX;
			this.y += this.deltaY;
		}
		return (this.steps >= 0 );
	}
	function int_reset() {
		if (this.totalSteps < 1) {
			this.steps = 0;
			this.x = this.endX;
			this.y = this.endY;
		}
		else {
			this.steps = this.totalSteps;
			this.x = this.startX;
			this.y = this.startY;
		}
	}
}
StraightPath.prototype = new Path;
</script>
<script type="text/javascript">
var animIndex = 0;
var animArray = new Array();
function Animator(id, p, period) {
	this.play = int_play;
	this.pause = int_pause;
	this.stop = int_stop;
	this.onanimationdone;
	this.elstyle = null;
	this.path = p;
	this.msec = period;
	this.id = id;
	this.index = animIndex;
	animArray[this.index] = this;
	this.thisString = "animArray[" + this.index + "]";
	animIndex++;
	function int_play() {
		if (this.elstyle == null) {
//			this.elstyle = (document.all != null) ? document.all[this.id].style : document.layers[this.id];
			if (document.all)	// IE4
				this.elstyle = document.all[this.id].style;
			else if (document.getElementById)	// NGLayout
				this.elstyle = document.getElementById(this.id).style;
			else if (document.layers)	// nn4.x
				this.elstyle = document.layers[this.id]
			else
				return;
		}
		if (this.path.step()) {
			this.elstyle.left = this.path.x;
			this.elstyle.top  = this.path.y;
			animArray[this.index].timer = setTimeout(this.thisString + ".play()", this.msec);
		}
		else if (this.onanimationdone != null) {
			if (typeof(this.onanimationdone) == "string")
				eval(this.onanimationdone);
			else if (typeof(this.onanimationdone) == "function")
				this.onanimationdone();
		}
	}
	function int_pause() {
		clearTimeout(animArray[this.index].timer);
	}
	function int_stop() {
		clearTimeout(animArray[this.index].timer);
		this.path.reset();
	}
}
</script>
<INPUT onclick=a.play() type=button value=开始> <INPUT onclick=a.pause() type=button value=暂停> <INPUT onclick=a.stop() type=button value=停止>
<DIV id=dot
style="HEIGHT: 100px; LEFT: 250px; POSITION: absolute; TOP: 150px; WIDTH: 100px"><img
alt="" border=0 height=32 src="http://youkud.com/image/logo-banner.jpg" width="32" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/></DIV>
<SCRIPT type=text/javascript>

</SCRIPT>

阅读原文

阅读 4339

123 显示电脑版