可以控制旋转的图像

添加时间：2008-02-13 | 浏览次数：24

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

<body>

// 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;

// 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;
	}

StraightPath.prototype = new Path;
</script>
<script type="text/javascript">
var animIndex = 0;
var animArray = new Array();

</body>

</html>

特别说明：如文本框里含有upjs/***.js内容的，请用查看按钮查看演示！

【复制】【打印】

>>相关资讯：

上篇特效：自动放大并点亮图片下篇特效：明暗变化的二张图片

网友评论

以下网友评论只代表其个人观点，不代表我要下载资源网-无忧学子网的观点或立场

用户登陆

加载中……