可以控制旋转的图像

站内搜索
热门关键字：表格超链接漂浮跟随旋转闪烁日期艺术字滚动点击关联菜单弹出随机
网页特效分类
网页特效分类 >> 图形特效
可以控制旋转的图像
[ 发布者：luwei | 来源：本站整理 | 时间：2005-10-25 | 浏览：人次 ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效|JcwCn.Com/Js|---可以控制旋转的图像</title>
</head>

<body>

<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: 100px; POSITION: absolute; TOP: 150px; WIDTH: 100px"><IMG  alt="" border=0 height=55 src="images/flag.gif" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/flag.gif" width=85></DIV>
<SCRIPT type=text/javascript>
<!--
p1 = new StraightPath(150,50,250,50,12);
p2 = new CirclePath(250,150,100,100,90,-90,30);
p3 = new StraightPath(250,250,150,250,12);
p4 = new CirclePath(150,150,100,100,270,90,30);
p = p1.concat(p2).concat(p3).concat(p4);
p = p.rotate(150,50,45).add(new StraightPath(100,100,100,100,1));
a = new Animator("dot", p, 50);
a.onanimationdone = new Function("alert('一遍已经转完，请先按停止键再开始.')");
//-->
</SCRIPT>

</body>

</html>
本类相关特效