JS 图片自动移动问题
0
最佳答案
0
<html>
<title>js用按钮控制页面上图片的移动丨芯晴网页特效丨CsrCode.Cn</title>
<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
><img
alt="" border=0 height=32 src="http://www.CsrCode.cn/html/txdm_2/images/20100711/blueball.gif" width=32 onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" /></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>
收获园豆：10
