JavaScript effect code that lets the picture div slide vertically

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> picture Slide Show effect </title>
<script type= "Text/javascript" >
var $$ = function (ID) {
Return "string" = = typeof ID? document.getElementById (ID): ID;
};
function Event (e) {
var oevent = document.all? Window.event:e;
if (document.all) {
if (Oevent.type = = "Mouseout") {
Oevent.relatedtarget = oevent.toelement;
}else if (Oevent.type = = "MouseOver") {
Oevent.relatedtarget = oevent.fromelement;
}
}
return oevent;
}
function addEventHandler (Otarget, Seventtype, Fnhandler) {
if (Otarget.addeventlistener) {
Otarget.addeventlistener (Seventtype, Fnhandler, false);
} else if (otarget.attachevent) {
Otarget.attachevent ("on" + Seventtype, Fnhandler);
} else {
Otarget["on" + seventtype] = Fnhandler;
}
};
var Class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}
Object.extend = function (destination, source) {
For (Var property in source) {
Destination[property] = Source[property];
}
return destination;
}

var Glideview = Class.create ();
Glideview.prototype = {
Container Object container width display label display width
Initialize:function (obj, iheight, STag, Imaxheight, options) {
var ocontainer = $$ (obj), othis=this, len = 0;
This. SetOptions (options);
This. Step = Math.Abs (this.options.Step);
This. Time = Math.Abs (this.options.Time);
This._list = Ocontainer.getelementsbytagname (STAG);
len = this._list.length;
This._count = Len;
This._height = parseint (Iheight/len);
This._height_max = parseint (imaxheight);
This._height_min = parseint ((iheight-this._height_max)/(len-1));
This._timer = null;
This. Each (function (olist, otext, i) {
Olist._target = this._height * i;//Custom one attribute drop target left
OList.style.top = olist._target + "px";
OList.style.position = "absolute";
addEventHandler (Olist, "mouseover", function () {OThis.Set.call (othis, i);});
})
Container style settings
OContainer.style.height = iheight + "px";
OContainer.style.overflow = "hidden";
OContainer.style.position = "relative";
Return default state when moving out of container
addEventHandler (Ocontainer, "mouseout", function (e) {
Workarounds to prevent the execution of olist mouseout
var o = Event (e). Relatedtarget;
if (Ocontainer.contains!ocontainer.contains (o): Ocontainer! = o &&! ( Ocontainer.comparedocumentposition (o) &) OThis.Set.call (Othis,-1);
})
},
Set default Properties
Setoptions:function (options) {
This.options = {//default value
step:20,//Sliding rate of change
time:3,//Sliding delay
TextTag: "",//Description container tag
textheight:0//Description Container Height
};
Object.extend (this.options, Options | | {});
},
Related Settings
Set:function (index) {
if (Index < 0) {
The mouse moves out of the container to return to the default state
This. Each (function (olist, otext, i) {olist._target = This._height * i; if (otext) {otext._target = This._height_text;}})
} else {
Move the mouse over a sliding object
This. Each (function (olist, otext, i) {
Olist._target = (i <= index)? This._height_min * i:this._height_min * (i-1) + This._height_max;
if (otext) {Otext._target = (i = = index)? 0:this._height_text;}
})
}
This. Move ();
},
Move
Move:function () {
Cleartimeout (This._timer);
var bfinish = true;//Whether all reach the destination address
This. Each (function (olist, otext, i) {
var inow = parseint (oList.style.top), Istep = this. Getstep (Olist._target, Inow);
if (istep! = 0) {bfinish = false; OList.style.top = (Inow + istep) + "px";}
})
Continue to move without reaching the target
if (!bfinish) {var othis = this; This._timer = SetTimeout (function () {othis.move ();}, this. Time); }
},
Get step size
Getstep:function (ITarget, Inow) {
var istep = (itarget-inow)/this. Step;
if (Istep = = 0) return 0;
if (Math.Abs (Istep) < 1) return (Istep > 0? 1:-1);
return istep;
},
Each:function (fun) {
for (var i = 0; i < This._count; i++)
Fun.call (this, this._list[i), (this. Showtext? This._text[i]: null), i);
}
};
</script>
<style type= "Text/css" >
#idGlideView {
height:314px;
width:325px;
margin:0 Auto;
}
#idGlideView Div {
width:325px;
height:314px;
}
</style>
<body>
<div id= "Idglideview" >
<div style= "Background-color: #006699;" > mouse over here and try it! </div>
<div style= "Background-color: #FF9933;" > mouse over here and try it! </div>
</div>
<div>http://www.999jiujiu.com/</div>
<SCRIPT>
var gv = new Glideview ("Idglideview", 314, "div", 280, "");
</SCRIPT>
</body>

JavaScript effect code that lets the picture div slide vertically