由纯文本实现的动画效果_网页文本特效

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 网页文本特效 >> 由纯文本实现的动画效果	查看此特效演示

由纯文本实现的动画效果

把如下代码复制到<head>与</head>之间

// 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>与</body>之间

<div style="width: 380;">
<script type="text/javascript">var localHeadingDownloadURL = "http://www.butong.net";

function includeHeading(title, url) {
	dw = new Function("x", "document.write(x)");	
	if (url != null)
		localHeadingDownloadURL = url;

if (document.all != null) {
		dw('<style type="text/css">');
		dw('');
		dw('</style>');
		
		dw('<div style="text-align: center; overflow: hidden; margin: 20px;" nowrap>');
		dw('<span id="hdBox">');
		
		dw('<div id="hdTitle" nowrap>');
		
		// Title inserted here
		dw(title);
		
		dw('</div>');
		
		dw('</span>');
		
		
		dw('<span id="hdCircle1" onmouseover="headDownloadHigh()" onmouseout="headDownloadLow()" onclick="headDownload()">n</span>');
		dw('<span id="hdCircle2" onmouseover="headDownloadHigh()" onmouseout="headDownloadLow()" onclick="headDownload()">n</span>');
		dw('<img id="hdDl" onmouseover="headDownloadHigh()" onmouseout="headDownloadLow()" onclick="headDownload()"');
		dw(' src="go.gif" width=23 height=23 border=0 alt="Download">');
		dw('</div>');
	}
	else {
		dw('<h1>' + title + '</h1>');
		if (localHeadingDownloadURL != "")
			dw('<p><a href="' + localHeadingDownloadURL + '">Download</a></p>');
	}
}

<div id="dot2" style="position: absolute; top: 150; left: 150; width: 100; font: 10px webdings; color: navy;">n</div>
<script  type="text/javascript">
<!--
c1 = new StraightPath(222,16,712,16,20);
c2 = new StraightPath(712,16,712,35,1);
c3 = new CirclePath(711,71,36,36,85,-150,10);
c4 = new StraightPath(680,86,222,86,17);
c5 = new StraightPath(222,86,222,16,7);

d = new StraightPath(-182,0,-182,0,1);
c6 = c1.concat(c2).concat(c3).concat(c4).concat(c5);
c = d.add(c6);

a2 = new Animator("dot2", c, 50);
a2.onanimationdone = "a2.stop();a2.play()";
a2.play();

//-->
</script>
<CENTER></CENTER>

上一个特效：文字在页面上蜿蜒飞舞

返回列表

下一个特效：文字下落效果