The Hover Object will hover a layer in a straight-line.
Initialization:
objectName.hover = new Hover(objectName,"hover")
Example:
mylayer = new DynLayer("mylayerDiv")
mylayer.hover = new Hover(mylayer,"hover")
The play() Method:
The play() method begins the hover motion:
objectName.hover.play(amplitude,angleinc,angle,cycles,orientation,speed,fn)
Examples:
mylayer.hover.play(60,8,0,1,'v',10)
The pause() and stop() Methods:
Work the same as in the circle() method.
objectName.hover.pause() objectName.hover.stop()
Source Code:
// Hover Object
// Copyright 1998 Dan Steinman
// Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/)
// June 22, 1998.
// In order to use this code you must keep this disclaimer
function Hover(dynlayer,name) {
this.dynlayer = dynlayer.obj
this.name = name
this.play = HoverPlay
this.slide = HoverSlide
this.pause = HoverPause
this.stop = HoverStop
}
function HoverPlay(amplitude,angleinc,angle,cycles,orientation,speed,fn) {
if (this.active) return
if (!this.paused) {
this.amplitude = amplitude
this.angleinc = angleinc
this.angle = angle
this.cycles = cycles
this.orientation = orientation
this.speed = speed
this.active = false
this.centerX = eval(this.dynlayer+'.x') - this.amplitude*Math.sin(this.angle*Math.PI/180)
this.centerY = eval(this.dynlayer+'.y') + this.amplitude*Math.sin(this.angle*Math.PI/180)
}
this.active = true
this.paused = false
eval(this.dynlayer+'.'+this.name+'.slide()')
}
function HoverSlide() {
if (this.active && (this.cycles==null || Math.abs(this.angleinc)<Math.abs(this.cycles*360-this.angle))) {
this.angle += this.angleinc
var x = (this.orientation=="h")? this.centerX + this.amplitude*Math.sin(this.angle*Math.PI/180) : null
var y = (this.orientation=="v")? this.centerY - this.amplitude*Math.sin(this.angle*Math.PI/180) : null
eval(this.dynlayer+'.moveTo('+x+','+y+')')
setTimeout(this.dynlayer+'.'+this.name+'.slide()',this.speed)
}
else if (!this.paused) {
this.active = false
eval(this.fn)
}
}
function HoverPause() {
if (this.active) {
this.active = false
this.paused = true
}
}
function HoverStop() {
this.active = false
this.paused = false
}
Demo:
View hover1.html for a hover example.
| Home | Next Lesson: Path Animation |